基于canvas的图片保存

最新推荐文章于 2025-05-15 09:28:47 发布

原创最新推荐文章于 2025-05-15 09:28:47 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript #base64

canvas 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用HTML5的<a>标签的download属性将Canvas画板上的图像保存为本地文件。通过修改DataURL的Mime-type为octet-stream并利用a标签的download属性实现文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们希望有的时候把canvas画板上的图像保存为图片，那么需要怎么做那

这里我们可以利用 HTML5 <a>标签的download属性。

download属性可以被赋值，用来指明下载文件的名称

先贴代码

function convertCanvasToImage(canvas,type,name) {
        var image = new Image();
        var imgdata = canvas.toDataURL("image/png");
        var fixtype = function (type) {
            type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        };
        imgdata = imgdata.replace(fixtype(type), 'image/octet-stream');
        
        //将图片保存到本地
        var saveFile = function (data, filename) {
            var link = document.createElement('a');
            link.href = data;
            link.download = filename;
            link.click();
        };
        var filename = name + '.' + type;
        saveFile(imgdata, filename);
    }

里面传递的参数第一个当然是选择的画板了，第二个则是要保存文件的类型，第三个则是文件的名字

首先先创建新的newImage 之后通过字符串操作，把base64的标题头改为image/octet-stream

原理是我们修改DataURL的Mime-type为octet-stream，强制让浏览器下载。

最后我们利用a标签的download属性将图片保存到本地，并取名字。

是不是很简单欢迎大家阅读我其他的文章