javascript PNG 操作

Question

我正在制作一个玩纸牌游戏的网站。卡片图像是从服务器下载的一个大 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) 不起作用，因为此 returns 是一个新的可变数组缓冲区，一张卡片会退出多个 arrayBuffer.slice(0,cardWidth)。我想这样做的原因是加载所有卡片只向服务器发出一个请求。如果我的想法没有完成，你能给我一个替代方案吗？

Answer 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>

javascript PNG 操作

javascript PNG manipulation

javascript

xmlhttprequest

png

arraybuffer