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 回答