Question

我有一个网页，允许用户使用以下代码将从他的文件中选择的图像加载到画布中：

var canvas = $('#imageCanvas')[0];
var ctx = canvas.getContext('2d');

var imageLoader = $('#imageLoader')[0];
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 = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width,img.height,0,0,canvas.width,canvas.height); 

        }
        img.src = event.target.result;

    }
    reader.readAsDataURL(e.target.files[0]);  

}

它运行良好，但我想要做的是如果用户没有上传任何图像，则为此画布设置默认源，以便使用默认图像加载画布首先是源代码，用户可以稍后加载他的图像。

我知道如何同时执行这两项操作（默认背景，加载图片），但在混合两者时我很挣扎，而且我没有找到任何类似的问题。

告诉我你是否需要更多细节/代码，我认为只有这个是必要的，但我可能错了任何帮助将不胜感激！

Answer 1

你可以通过以下方式完成类似的事情......

＆＃13;

var canvas = $('#imageCanvas')[0];
var ctx = canvas.getContext('2d');

var imageLoader = $('#imageLoader')[0];
imageLoader.addEventListener('change', handleImage, false);

// default image
var defImg = new Image();
defImg.src = "http://www.rhlaw.com/blog/wp-content/uploads/2011/10/kitten-300x300.jpg";
defImg.onload = function() {
    canvas.width = defImg.width;
    canvas.height = defImg.height;
    ctx.drawImage(defImg, 0, 0);
};
// user loaded image
function handleImage() {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var img = new Image();
            img.src = event.target.result;
            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
            };
        };
        reader.readAsDataURL(this.files[0]);
    }
}

＆＃13;

#imageCanvas {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="imageCanvas"></canvas>
<input type='file' id="imageLoader" accept="image/*">

＆＃13;

如何将默认图像添加到画布，还让用户加载自己的图像

1 个答案: