Question

如何使用toDataURL方法存储包含图像的画布？一切都适用于文本和绘图，但我不知道如何处理图像。任何帮助，将不胜感激。感谢

我修改了我的问题如下：

直接从.png中提取图像时，此功能正常。但是，当我调用Google Charts API时，即使图像在画布上正确呈现，toDataURL也不起作用。谷歌图表正在返回.png。有人有主意吗？感谢。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8">

function test() {
var c = document.getElementById("drawing-canvas");
var cxt = c.getContext("2d");

// This doesn't work.
//var imgsrc = 'http://chart.apis.google.com/chart?cht=tx&chf=bg,s,ffffff&chco=000000& 
chl=a';  

// This works
var imgsrc = 'chart.png'; 


var img = new Image();
img.src = imgsrc; 
cxt.drawImage(img,0,0);

}

function wr() {
var cc = document.getElementById("drawing-canvas");
var url = cc.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
</script>

</head>
<body onload = "test();">
<canvas id="drawing-canvas" width = "500px" height = "500px" style="background-color: 
#ffffff; border: 2px solid #000000;">
Your browser does not support the canvas element.
</canvas>
<input type = "button" value = "go" onclick = "wr();">
</body>
</html>

Answer 1

首先，当我测试它时，你的图表甚至没有在画布上渲染。您需要等待图像加载。您的chart.png图片可能会在缓存后立即加载，但Google Charts API生成的图片则不会。这是你应该做的：

var img = new Image();
img.onload = function()
{
    cxt.drawImage(img,0,0);
}
img.src = imgsrc;

除此之外，您必须在浏览器的控制台中获得SECURITY_ERR。这是因为the Canvas security model doesn't allow you to export images coming from an external URL。您应该使用服务器端语言将Google Charts图像保存到服务器，然后从那里加载。

Answer 2

HTML canvas 元素有一个名为toDataURL的方法，它将返回表示画布的数据URL图像。您可以查看文档API on the MDN。

具体来说，它说的是toDataURL：

toDataURL （在可选的DOMString类型中，在任何... args ）

返回DOMString

返回一个数据：包含按类型指定的格式（默认为PNG）的图像表示的URL。



如果画布的高度或宽度为0，则返回表示空字符串的“data：，”。



如果请求的类型不是image / png，并且返回的值以data：image / png开头，则不支持请求的类型。



Chrome支持图片/网址类型。



如果请求的类型是image / jpeg或image / webp，则第二个参数（如果介于0.0和1.0之间）被视为指示图像质量;如果第二个参数是其他参数，则使用图像质量的默认值。其他参数被忽略。

并提供了如何使用它的示例：

 function test() {
     var canvas = document.getElementById("canvas");
     var url = canvas.toDataURL();

     var newImg = document.createElement("img");
     newImg.src = url;
     document.body.appendChild(newImg);
 }

在这个例子中，我们使用dataURL作为img元素的源属性，但你可以做任何你想做的事情（比如将它存储在某个地方，或者通过ajax调用将它发送到服务器）

请注意，绘制画布时涉及的大多数方法是绘制上下文的方法（通过调用getContext获得），而此方法是其中一个画布元素。

存储包含图像的HTML5画布

2 个答案: