使用图片作为图片保存HTML5画布 [英] Save HTML5 canvas with images as an image
本文介绍了使用图片作为图片保存HTML5画布的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试使用图片将画布保存到PNG,但是当我尝试这样做时:
I'm trying to save a canvas with images to PNG, but when I try this:
var myCanvas = document.getElementById("myCanvas");
var img = document.createElement('img');
var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;
img.src = 'image.png';
img.onload = function () {
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
}
var data = myCanvas.toDataURL("image/png");
if (!window.open(data)) {
document.location.href = data;
}
我只得到一个没有图像的空白透明图像。
I only get a blank transparent image without the image. What am I doing wrong?
推荐答案
您需要将 window.open $ c $
You need to put the window.open
call in the load handler since this happens asynchronously.
img.onload = function () {
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
var data = myCanvas.toDataURL("image/png");
if (!window.open(data)) {
document.location.href = data;
}
}
这篇关于使用图片作为图片保存HTML5画布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文