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

  • 2022-11-24 23:19:01

整理文档,搜刮出一个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")); 

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

猜你喜欢