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) не работает, потому что это возвращает новое в изменяемом ArrayBuffer, и одна карты будет выйти из многократного 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; 
} 

Demo

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