为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

qq_花开花谢_0 2019-10-08 15:33:04
我有一个带有绘图的画布元素,我想创建一个按钮,单击该按钮会将图像另存为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 / 有人知道怎么修这个东西吗?
查看完整描述

3 回答

?
MMTTMM

TA贡献1869条经验 获得超4个赞

尝试这个:


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'));


查看完整回答
反对 回复 2019-10-08
?
莫回无

TA贡献1865条经验 获得超7个赞

FileSaver.js应该可以在这里为您提供帮助。


var canvas = document.getElementById("my-canvas");

// draw to canvas...

canvas.toBlob(function(blob) {

    saveAs(blob, "pretty image.png");

});


查看完整回答
反对 回复 2019-10-08
?
慕的地6264312

TA贡献1817条经验 获得超6个赞

我使用此解决方案来设置文件名:


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');

}


查看完整回答
反对 回复 2019-10-08
  • 3 回答
  • 0 关注
  • 710 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信