如何将画布另存为png图像?

我有一个带有绘图的画布元素,我想创建一个按钮,单击该按钮会将图像另存为png文件。所以它应该打开保存,打开,关闭对话框...


我用这段代码


var canvas = document.getElementById("myCanvas");

window.open(canvas.toDataURL("image/png"));

但是,当我在IE9中对其进行测试时,会打开一个新窗口,显示“无法显示该网页”,其网址为:


data:image / 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 + um / + e + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2 / 6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6 / eK7eJ / Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgBTky + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ / XP + PlLtEcs3huGQhO / r17K3rBvuGrEUt8i5HPAkHC / Yt6lKuwYKiuRM9TtGbY0rcerTBLwC / KY1fSNJ / MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5pR3 / zvFZJni / 7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk / OiwZViHPQk / LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu / 

有人知道怎么修这个东西吗?


qq_花开花谢_0
浏览 713回答 3
3回答

MMTTMM

尝试这个: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'/>");这会在新页面上显示画布上的图像,但是如果您进行了open popup in new tab设置,它将显示about:blank在地址栏中。编辑:-尽管window.open("<img src='"+ c.toDataURL('image/png') +"'/>")在FF或Chrome中不起作用,但尽管渲染与画布上显示的有所不同,但以下工作可行,但我认为透明度是问题所在:window.open(c.toDataURL('image/png'));

莫回无

FileSaver.js应该可以在这里为您提供帮助。var canvas = document.getElementById("my-canvas");// draw to canvas...canvas.toBlob(function(blob) {&nbsp; &nbsp; saveAs(blob, "pretty image.png");});

慕的地6264312

我使用此解决方案来设置文件名:HTML:<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a><canvas id="canvas"></canvas>JavaScript:function download(){&nbsp; &nbsp; document.getElementById("downloader").download = "image.png";&nbsp; &nbsp; document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');}
打开App,查看更多内容
随时随地看视频慕课网APP