小编Dan*_*nil的帖子

我如何知道 HTML5 Canvas 何时完成绘制?

我是 javascript 的初学者。我正在尝试在客户端调整图像大小,然后再将它们上传到我的服务器进行存储我找到了一种使用 HTML5 Canvas 做到这一点的方法:http : //hacks.mozilla.org/2011/01/how-to-develop- a-html5-image-uploader/

我的问题:它一直上传空白图像。我认为空白图像的原因是当我从画布中抓取图像时画布没有完成绘制。当我在从画布抓取图像之前设置 3 秒 windows.timeout 时,一切正常。有没有比超时更可靠的方法?或者有没有其他方法可以调整客户端图像大小?

我进行客户端图像大小调整的原因是因为我正在与上传不必要的大文件的人打交道,我认为进行客户端图像大小调整是最有效的。

感谢您的任何提示/答案!

//resize image
Resizeimage.resize(file);

//***if i wrap this part with timeout it works
var canvas = document.getElementById('canvas');
var data = canvas.toDataURL(file.type);

// convert base64/URLEncoded data component to raw binary data held in a string
var bytestring;
if (data.split(',')[0].indexOf('base64') >= 0)
  bytestring = atob(data.split(',')[1]);
else
  bytestring = escape(data.split(',')[1]);

//get imagetype
var mimeString = data.split(',')[0].split(':')[1].split(';')[0];

// write the bytes of the string to a typed …
Run Code Online (Sandbox Code Playgroud)

html javascript resize canvas image

5
推荐指数
1
解决办法
5661
查看次数

标签 统计

canvas ×1

html ×1

image ×1

javascript ×1

resize ×1