javascript PNG操作答案

【问题标题】：javascript PNG manipulationjavascript PNG操作
【发布时间】：2015-12-04 14:35:00
【问题描述】：

我正在制作一个玩纸牌游戏的网站。卡片的图像以一个大的 PNG 文件从服务器下载。在客户端，使用 javascript，我想制作多个元素，每张卡片一个。

var cards = new Array(number of cards);
var request = new XMLHttpRequest();
request.responseType    = "arraybuffer";
//alternatively: request.responseType    = "blob";

request.onreadystatechange = function(){
    var arrayBuffer = this.respons;

    //how do I cut up the arrayBuffer such that i can use something like:

    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( cards[3] );

    var img = document.getElementById("img");
    img.src = imageUrl;

}
request.open("GET","cardsheet.png",true);
request.send();

arrayBuffer.slice(0,cardWidth) 不起作用，因为这会在可变 arrayBuffer 中返回一个新的，并且一张卡会从多个 arrayBuffer.slice(0,cardWidth) 中退出。我想这样做的原因是为了加载所有卡只向服务器发出一个请求。如果我的想法没有完成，你能提供一个替代方案吗？

【问题讨论】：

为什么不使用 css background-position 将图像正确定位在卡片中并将其用作背景？
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/…

标签： javascript xmlhttprequest png arraybuffer

【解决方案1】：

您可以使用 CSS 来简化这一点，只需在设置元素的背景图像时使用 background-position 样式。

.card {
   width:100px;
   height:175px;
   background-image:url(http://placekitten.com/300/300);
   background-position:100px 100px;
}

演示

.card {
  width:100px;
  height:175px;
  display:inline-block;
  background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg);
}

.card.card-1 {
  background-position:0px 0;  
}

.card.card-2 {
  background-position:-100px 0;  
}

.card.card-3 {
  background-position:-200px 0;  
}

<div class="card card-1"></div>
<div class="card card-2"></div>
<div class="card card-3"></div>

【讨论】：