Question

据我所知，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);
                });

这很好，他们按我的喜好排序。

我的问题是我上传了一张图片，供用户将图片上传到Canvas。

我只是使用上传框来测试理论，但想法是用户将使用JQuery / PHP上传他们的图像，裁剪，缩放它，这样可以保存图像。然后，我将抓住这个被操纵的URL并将其拉入，但问题是Canvas已加载，因此当我上传图像时，它会在源图像上显示。

我不想使用多个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]);     
                }

Answer 1

Canvas没有图层。

但是你仍然可以使用背景和用户的缩放/旋转前景获得1张最终图像。

由于您希望让用户旋转/缩放图像，但您不想影响背景，因此需要2个画布 - 背景画布和用户画布。

// HTML

<div id="container">
  <canvas id="background" class="subcanvs" width=760 height=300></canvas>
  <canvas id="canvas" class="subcanvs" width=760 height=300></canvas>
</div>

// CSS

#container{
  position:relative;
  border:1px solid blue;
  width:760px;
  height:300px;
}
.subcanvs{
  position:absolute;
}


// JavaScript 

// a background canvas
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");

// a foreground canvas the user can rotate/scale
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

然后当用户完成旋转/缩放时，将用户画布绘制到背景画布上。

// combine the users finished canvas with the background canvas
bkCtx.drawImage(canvas,0,0);

// and save the background canvas (now it's combined) as an image
var imageURL=background.toDataURL();

画布层（Z索引）

1 个答案: