专栏首页蚂蚁开源社区【高频知识点】canvas如何转存为图片?

【高频知识点】canvas如何转存为图片?

有时候,我们绘制好的canvas想存储为本地图片,该怎么做呢?canvas提供了一个重要的方法toDataURL(),这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数),然后返回 Data URL数据。接下来我们看具体是怎么实现的。

html页面一个canvas画布:

<canvas width=200 height=200 id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>

对应的js代码实现:

window.onload = function() {
        draw();
        var saveButton = document.getElementById("saveImageBtn");
        bindButtonEvent(saveButton, "click", saveImageInfo);
        var dlButton = document.getElementById("downloadImageBtn");
        bindButtonEvent(dlButton, "click", saveAsLocalImage);
      };
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
                ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
                ctx.fillText("Gloomyfish - Demo", 50, 50);
            }
            
            function bindButtonEvent(element, type, handler)
{
                 if(element.addEventListener) {
                    element.addEventListener(type, handler, false);
                 } else {
                    element.attachEvent('on'+type, handler);
                 }
      }
            
            function saveImageInfo () 
{
              var mycanvas = document.getElementById("thecanvas");
              var image    = mycanvas.toDataURL("image/png");
              var w=window.open('about:blank','image from canvas');
              w.document.write("<img src='"+image+"' alt='from canvas'/>");
            }
 
            function saveAsLocalImage () {
              var myCanvas = document.getElementById("thecanvas");
            // here is the most important part because if you dont replace you will get a DOM 18 exception.
            // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
            var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
            window.location.href=image; // it will save locally
          }

点击save按钮后,显示图片,点击图片即可弹出下载对话框。

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:大神神码

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5炫酷流星动画特效教程

    这是一款HTML5炫酷光粒子动画特效。该特效通过js在页面中生成canvas元素,并通过算法在其中生成炫酷的光粒子动画特效。 使用方法

    用户5997198
  • 使用HTML5和Javascript设计绘图程序

    首先,我们来设计下这个绘图程序将会拥有什么功能。在这个简单的绘图程序中,首先要有的是一块能给用户涂鸦的画布区域,上面有一只可爱的小鸭,然后我们准备了4种不同颜色...

    用户5997198
  • 【开源游戏/网络游戏】网游 胧村镇 LongCunZhen

    打怪,杀怪,升级!胧村镇恶贼横行,你化身成为一名侠客,来驱赶这些恶贼,禁止他们再祸害胧村镇的人。

    用户5997198
  • 归纳一下:C#线程同步的几种方法

     我们在编程的时候,有时会使用多线程来解决问题,比如你的程序需要在后台处理一大堆数据,但还要使用户界面处于可操作状态;或者你的程序需要访问一些外部资源如数据库或...

    zls365
  • 手写简单的rpc

    gfu
  • 如何快速提高Excel逼格?我有办法!

    来源:https://www.zhihu.com/question/20586917 此文不作商用,仅供学员学习交流用途。

    小莹莹
  • PHP中复杂类型的一些探究。。。

    array(1) { [0]=> int(0) } array(2) { [0]=> int(0) [1]=> int(1) }

    ApacheCN_飞龙
  • JavaScript基础系列

    typeof检测变量的类型,变量的类型取决于变量的类型,变量是没有类型的。返回值:string,number,等。

    达达前端
  • 关于版权行业的现状你知道多少?又有多少是你不知道的?

    小墨第一次对版权这个东西有认知的时候,大概是在学生时代的高中阶段,那时候语文老师要求每个同学都必备一本《中国汉语词典》,第一次听闻这部词汇巨作的小墨不大能理解这...

    墨者安全科技
  • Facebook又双叒叕爆用户数据泄露!企业该如何保护数据资产安全?

    当企业上云成为普遍趋势,数据安全成为企业核心资产安全之一,是贯穿企业安全生命周期的重要挑战。近期Facebook事件就再一次为企业数据安全敲响警钟。 企业应当...

    腾讯云安全

扫码关注云+社区

领取腾讯云代金券