在HTML5画布中是否有任何事件告诉图像已经绘制

Is there any event in HTML5 canvas which tells that image has been drawn?

本文关键字：图像 绘制 事件 任何 HTML5 布中 是否      更新时间：2023-09-26

我使用<input type='file' onchange="readURL(this)"/>控件将图像上传到我的web服务。这里我使用canvas来减小图像大小。代码工作得很好，但是当我们第一次尝试上传图像时，它会发送空白图像，第二次尝试时，它会发送第一张图像。这意味着我需要一个canvas事件来告诉我图像何时已经在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画布告诉图像已绘制?

您必须将$.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调用，并且直到加载发生时图像才被绘制到画布上。

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

顺便说一句，在一个不相关的问题上，有一个新的bug在Chrome中，是通过使用新的图像()绊倒。

如果你使用备用的:document.createElement("img")，那就好了。

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

相关文章：