JavaScript实现Canvas图片保存为PNG并下载至本地

作者:小圆点

时间:2026-10-22

浏览:501

本文介绍如何使用JavaScript将Canvas内容保存为PNG格式并触发本地下载。通过Base64编码解析生成Blob对象,利用动态创建的a标签及URL.createObjectURL实现文件下载功能,适用于前端图片处理场景。

文章目录

Canvas图片保存与下载实现

本文整理并精简了一种使用JavaScript将Canvas图像保存为PNG格式并下载至本地的实现方案,供参考分享。

第一步涉及Canvas图像的保存处理。

第二步实现将图像数据下载至本地设备。


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

以上为本文分享的全部内容,希望能为读者提供学习上的帮助,并欢迎大家继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章