canvas下载图片方法

最新推荐文章于 2025-04-07 11:22:27 发布

Edward_Cullens

最新推荐文章于 2025-04-07 11:22:27 发布

阅读量3.6k

点赞数 3

分类专栏： canvas js 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/Edward_Cullens/article/details/123043512

版权

js 同时被 2 个专栏收录

22 篇文章

订阅专栏

canvas

2 篇文章

订阅专栏

博客讲述了如何利用JavaScript解决将网站上的canvas元素内容保存为本地图片的问题。通过获取canvas元素，转换为PNG格式的dataURL，并创建一个隐藏的a标签来触发下载。该方法成功实现了canvas图表的本地保存。

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

有个需求说要把网站上的图表可以保存到本地，查看了一下表单的元素，是canvas内的。
用了好多种方法，都失败了。最后搜到了stackoverflow上的一种方法成功导出，代码贴在下面

//canvas下载图片
    exportCanvasAsPNG:function (id, fileName) {
        var canvasElement = document.getElementById(id);
        var MIME_TYPE = "image/png";
        var imgURL = canvasElement.toDataURL(MIME_TYPE);
        var dlLink = document.createElement('a');
        dlLink.download = fileName;
        dlLink.href = imgURL;
        dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
    },
exportCanvasAsPNG("poster","图片名字"); //canvas的id ， 图片名字