キャンバスはインクが乾くにつれて、描画された各アイテムが上にあることを理解しています。
少し問題があります。背景画像のソースのリストがあります
var sources = {
bg: 'images/room-1/bg.png',
rightWall: 'images/room-1/wall-right.png',
leftWall: 'images/room-1/wall-left.png',
beam: 'images/room-1/beam-left.png',
sofa: 'images/room-1/sofa.png'
};
loadImages(sources, function(images) {
context.drawImage(images.bg, 0, 0, 760, 500);
context.drawImage(images.rightWall, 714, 0, 46, 392);
context.drawImage(images.leftWall, 0, 160, 194,322);
context.drawImage(images.beam, 0, 45, 143,110);
context.drawImage(images.sofa, 194, 280, 436,140);
});
これは結構です。彼らは私の好きなように注文します。
私の問題は、ユーザーが画像をキャンバスにアップロードするための画像アップロードがあることです。
私は理論をテストするためにアップロードボックスを使用していますが、アイデアは、ユーザーがJQuery / PHPを使用して画像をアップロードし、切り取り、拡大縮小し、画像を保存することです。次に、この操作された URL を取得して取り込みますが、問題は Canvas が読み込まれているため、画像をアップロードするとソース画像の上に表示されることです。
このキャンバスを画像全体として保存する必要があるため、複数のキャンバスを使用したくありません。
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = 760;
canvas.height = 300;
}
img.src = event.target.result;
img.onload = function(){
context.drawImage(img, 0, 0);
};
}
reader.readAsDataURL(e.target.files[0]);
}