欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现canvas保存图片为png格式并下载到本地的方法

程序员文章站 2022-11-24 23:19:01
整理文档,搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法,稍微整理精简一下做下分享。 1.canvas 保存图片 2.下载到本地 f...

整理文档,搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法,稍微整理精简一下做下分享。

1.canvas 保存图片

2.下载到本地

function base64img2blob(code){

        var parts = code.split(';base64,');

        var contenttype = parts[0].split(':')[1];

        var raw = window.atob(parts[1]);

        var rawlength = raw.length;

 

        var uint8array = new uint8array(rawlength);

 

        for (var i = 0; i < rawlength; ++i) {

         uint8array[i] = raw.charcodeat(i);

        }

 

        return new blob([uint8array], {type: contenttype}); 

      }

      function downloadfile(filename, content){

        

        var alink = document.createelement('a');

        var blob = base64img2blob(content); //new blob([content]);

        

        var evt = document.createevent("htmlevents");

        evt.initevent("click", false, false);//initevent 不加后两个参数在ff下会报错

        alink.download = filename;

        alink.href = url.createobjecturl(blob);

     

        alink.dispatchevent(evt);

      }      

downloadfile('ship.png', canvas.todataurl("image/png")); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。