vue生成图片保存到本地

最新推荐文章于 2025-03-29 18:39:26 发布

xniYa!

最新推荐文章于 2025-03-29 18:39:26 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52134424/article/details/131375805

版权

本文介绍了如何在Vue.js项目中生成图片并将其保存到用户的本地。通过阅读，你将了解相关前端技术如JavaScript的使用方法。

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

第一步

npm install html2canvas

代码

<button @click="SaveCanvas">下载图片</button>

//点击保存为Canvas
        SaveCanvas() {
            // 这里的类名要与点击事件里的一样
            const canvas = document.querySelector(".menu");
            let that = this;
            html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
                function (canvas) {
                    const type = "png";
                    let imgData = canvas.toDataURL(type);
                    // 图片格式处理
                    let _fixType = function (type) {
                        type = type.toLowerCase().replace(/jpg/i, "jpeg");
                        let r = type.match(/png|jpeg|bmp|gif/)[0];
                        return "image/" + r;
                    };