0

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

我修改了我的问题如下：

这适用于直接从 .png 提取图像时。但是，当我调用 Google Charts API 时，即使图像在画布上正确呈现，toDataURL 也不起作用。Google Charts 返回一个 .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>
4

2 回答 2

1

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

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

除此之外，您必须SECURITY_ERR在浏览器的控制台中获得一个。这是因为Canvas 安全模型不允许您导出来自外部 URL 的图像。您应该使用服务器端语言将 Google Charts 图像保存到您的服务器，然后从那里加载它。

于 2012-12-22T22:45:07.070 回答
0

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

具体来说，它说toDataURL：

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

返回DOMString

返回一个 data: URL，其中包含由 type 指定的格式的图像表示（默认为 PNG）。

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

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

  • Chrome 支持 image/webp 类型。

  • 如果请求的类型是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），而此方法是画布元素之一。

于 2012-12-21T05:12:53.763 回答