我知道 Canvas 就像墨水一样干燥,每个绘制的项目都在上面。
我有一个小问题,我有一个背景图像来源列表
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]);
}