如何将canvas保存为PNG图像？
我有一个绘图的canvas元素，我想创build一个button，点击时，它将保存图像为PNG文件。 所以它应该打开保存，打开，closures对话框…
我使用这个代码来做
var canvas = document.getElementById("myCanvas"); window.open(canvas.toDataURL("image/png")); 但是，当我在IE9中testing出来，一个新的窗口打开，说“网页无法显示”，它的url是：
数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf / 6el6 / 6ZnpSW / zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW / vkdrfx3H3yfT2tVzaP26X6hkw1q / BoeI / 280 / 29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx / WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 / ldau + H + TX / 8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi / UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK / eTuQU1YuccCQBW7dyIq38 / J5A / fN的/ ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J / bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + gUrk +微米/ + E + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2 / 6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6 / eK7eJ / Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgB TKY + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ / XP + PlLtEcs3huGQhO / r17K3rBvuGrEUt8i5HPAkHC / Yt6lKuwYKiuRM9TtGbY0rcerTBLwC / KY1fSNJ / MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5pR3 / zvFZJni / 7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk / OiwZViHPQk / LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu / hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O / L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU / SgUJ7WNLjOVH9g8 / Xrv2Fa4P9SM6K7y4t + WXRw76sfVc42fPV936iJ5 + LKrbqTU0P3rA + 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy / HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvVoYY 9Y0inIeE + YQQ + cqGGj3dgDtvJjC / mKm7BHmG68lGjO + 0T
有谁知道如何解决这个问题？
尝试这个：
var c=document.getElementById("alpha"); var d=c.toDataURL("image/png"); var w=window.open('about:blank','image from canvas'); w.document.write("<img src='"+d+"' alt='from canvas'/>");
这将在新页面上显示来自canvas的图像，但是如果您open popup in new tab设置中open popup in new tab则会在地址栏中显示about:blank 。
编辑： – 尽pipewindow.open("<img src='"+ c.toDataURL('image/png') +"'/>")不工作在FF或Chrome，下面的作品虽然渲染有点不同在canvas上显示，我认为透明度是问题：
window.open(c.toDataURL('image/png'));
FileSaver.js应该能够在这里帮助你。
var canvas = document.getElementById("my-canvas"); // draw to canvas... canvas.toBlob(function(blob) { saveAs(blob, "pretty image.png"); });
我用这个解决scheme来设置文件名 ：
HTML：
<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a> <canvas id="canvas"></canvas>
JavaScript的：
function() download(){ document.getElementById("downloader").download = "image.png"; document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream'); }
我也许发现了一个更好的方法，不要强迫用户按右键“保存图像为”。 只需要将canvas的base64代码绘制到链接的href中并修改它就可以自动启动下载。 我不知道它的通用浏览器兼容，但它应该与主/新浏览器。
var canvas = document.getElementById('your-canvas'); if (canvas.getContext) { var C = canvas.getContext('2d'); } $('#your-canvas').mousedown(function(event) { // feel free to choose your event ;) // just for example // var OFFSET = $(this).offset(); // var x = event.pageX - OFFSET.left; // var y = event.pageY - OFFSET.top; // standard data to url var imgdata = canvas.toDataURL('image/png'); // modify the dataUrl so the browser starts downloading it instead of just showing it var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream'); // give the link the values it needs $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata); });
随意包围任何你想要的东西，希望有所帮助
我有这个问题，这是没有任何外部或额外的脚本库的最佳解决scheme：在JavaScript标签或文件中创build此function：我们在这里假设canvas是您的canvas：
function download(){ var download = document.getElementById("download"); var image = document.getElementById("canvas").toDataURL("image/png") .replace("image/png", "image/octet-stream"); download.setAttribute("href", image); }
在HTML的正文部分指定button：
<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>
这是工作和下载链接看起来像一个button。 testingFirefox和Chrome。
尝试这个：
jQuery('body').after('<a id="Download" target="_blank">Click Here</a>'); var canvas = document.getElementById('canvasID'); var ctx = canvas.getContext('2d'); document.getElementById('Download').addEventListener('click', function() { downloadCanvas(this, 'canvas', 'test.png'); }, false); function downloadCanvas(link, canvasId, filename) { link.href = document.getElementById(canvasId).toDataURL(); link.Download = filename; }
你可以把这个代码放在firefox或者chrom的控制台中，然后在上面的脚本中改变你的canvas标识，然后在控制台中运行这个脚本。
执行此代码后，您将在HTML页面的底部看到文本为“click here”的链接。 点击此链接并在新窗口中以PNG图像的forms打开canvasgraphics保存图像。
提交一个表单，其中包含一个input，其值为canvas toDataURL（'image / png'），例如
// JAVASCRIPT
var canvas = document.getElementById("canvas"); var url = canvas.toDataUrl('image/png');
将url的值插入到表单元素的隐藏input中。
// PHP
$data = $_POST['photo']; $data = str_replace('data:image/png;base64,', '', $data); $data = base64_decode($data); file_put_contents("i". rand(0, 50).".png", $data);
var canvasId = chart.id + '-canvas'; var canvasDownloadId = chart.id + '-download-canvas'; var canvasHtml = Ext.String.format('<canvas id="{0}" width="{1}" height="{2}"></canvas><a id="{3}"/>', canvasId, chart.getWidth(), chart.getHeight(), canvasDownloadId); var canvasElement = reportBuilder.add({ html: canvasHtml }); var canvas = document.getElementById(canvasId); var canvasDownload = document.getElementById(canvasDownloadId); canvasDownload.href = chart.getImage().data; canvasDownload.download = 'chart'; canvasDownload.click();
