HTML5 画布中是否有任何事件表明图像已被绘制？答案

【问题标题】：Is there any event in HTML5 canvas which tells that image has been drawn?HTML5 画布中是否有任何事件表明图像已被绘制？
【发布时间】：2013-06-16 11:25:39
【问题描述】：

我正在使用<input type='file' onchange="readURL(this)"/> 控件将图像上传到我的网络服务。在这里，我使用canvas 来减小图像大小。代码工作正常，但第一次尝试上传图片时，它发送空白图片，第二次尝试发送第一张图片。这意味着我需要一个画布事件来告诉我何时在画布上绘制了图像

function readURL(input) {
    if (input.files && input.files[0]) {
        var canvas = document.getElementById('canvas1');
        var context = canvas.getContext('2d');
        var reader = new FileReader();
        reader.onload = function (e) {
            var imageObj = new Image();                  
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0, 300, 275);
            };
            imageObj.src = e.target.result.toString();

            $.ajax({
                 //My Web Service call code
            });                 
        }
        reader.readAsDataURL(input.files[0]);
    }
}

那么问题是 HTML5 画布中是否有任何事件表明图像已被绘制？

【问题讨论】：

标签： javascript image html5-canvas

【解决方案1】：

您必须将您的 $.ajax 调用移动到图像的 onload 处理程序中：

var imageObj = new Image();                  
imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0, 300, 275);

    $.ajax({
         //My Web Service call code
    });
};
imageObj.src = e.target.result.toString();

您编写的代码在加载图像之前进行了 Ajax 调用，并且在加载发生之前图像不会被绘制到画布上。

【讨论】：

【解决方案2】：

尝试使用reader.onloadend 代替 reader.onload。

顺便说一句，在 Chrome 中存在一个新的错误，它被使用 new Image() 触发。

如果您使用备用：document.createElement("img")，则很好。

最后（不重要），由于您正在处理图像文件，您可能会查看 FileReader 上的 reader.readAsDataURL 选项。

【讨论】：