使用图片作为图片保存HTML5画布

本文介绍了使用图片作为图片保存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

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; } }