存储包含图像的HTML5画布_Html_Html5 Canvas

存储包含图像的HTML5画布

html html5-canvas

存储包含图像的HTML5画布,html,html5-canvas,Html,Html5 Canvas,如何使用toDataURL方法存储包含图像的画布？对于文字和绘图，一切都很好，但我不知道如何处理图像。任何帮助都将不胜感激。谢谢我已将我的问题修改如下：当直接从.png文件中提取图像时，此操作有效。然而，当我调用GoogleCharts API时，即使图像在画布上正确呈现，toDataURL也无法工作。谷歌图表正在返回一个.png。有人有什么想法吗？谢谢 <!DOCTYPE HTML> <html> <head> <meta charset="utf

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

我已将我的问题修改如下：

当直接从.png文件中提取图像时，此操作有效。然而，当我调用GoogleCharts 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>


功能测试（）{
var c=document.getElementById（“绘图画布”）；
var cxt=c.getContext（“2d”）；
//这不管用。
//var imgsrc=http://chart.apis.google.com/chart?cht=tx&chf=bg，s，ffffff&chco=000000&
chl=a′；
//这很有效
var imgsrc='chart.png'；
var img=新图像（）；
img.src=imgsrc；
cxtdrawimage（img，0,0）；
}
函数wr（）{
var cc=document.getElementById（“绘图画布”）；
var url=cc.toDataURL（）；
var newImg=document.createElement（“img”）；
newImg.src=url；
文件.正文.附件（newImg）；
}
您的浏览器不支持画布元素。

HTML canvas元素有一个名为

toDataURL

的方法，该方法将返回表示画布的数据URL图像。您可以查看文档API

具体地说，它是关于

toDataURL

：

toDataURL（在可选的

DOMString

类型中，在任何…参数中）

DOMString

返回一个data:URL，其中包含按类型指定的格式表示的图像（默认为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
获得），而此方法是画布元素之一。首先，当我测试图表时，图表甚至没有呈现在画布上。您需要等待图像加载。您的
chart.png
图像可能会在缓存后立即加载，但Google Charts API生成的图像不会。这就是你应该做的：

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

除此之外，您必须在浏览器的控制台中获得
安全性错误。这是因为。您应该使用服务器端语言将Google Charts图像保存到您的服务器，然后从那里加载。当我在画布上使用drawImage时，源代码是.png，一切正常。当我使用从GoogleCharts API获取的图像时，它会在画布中正确呈现，但我无法使用toDataURL保存它。是的，谢谢，当我在服务器上保存图像时，这起到了作用。但我在缓存方面有问题。我尝试了img.src=“chart.png'+'？'+Math.random（）；但是drawImage（img，x，y）由于某种原因不起作用。但是，当我构建img.src='chart.png？12345'时它确实起作用。有什么想法吗？