html2canvas 使用

最新推荐文章于 2024-05-27 21:41:23 发布

竹屋听雨

最新推荐文章于 2024-05-27 21:41:23 发布

阅读量2.7k

点赞数 3

分类专栏：前端学习日常文章标签： node.js vue.js javascript

本文链接：https://blog.csdn.net/Barret_M82A1/article/details/120221403

版权

前端学习日常专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天遇到一个问题：生产海报

翻箱倒柜，发现这个玩意我不会，那就学习一下吧。

简单记录一下

首先：npm 安装插件： npm install --save html2canvas

然后：在具体页面里引入 import html2canvas from "html2canvas"

然后：

        downloadImg:function(){
            new html2canvas(document.getElementById('tempPoster'),{
                useCORS: true,
                allowTaint: true // 这两个属性都是图片跨域相关属性
            }
            ).then(canvas => {
                // canvas为转换后的Canvas对象
                let tempImg = new Image();
                tempImg.src = canvas.toDataURL();  // 导出图片
                // 本地
                // this.downloadLocMethod(tempImg.src, '海报')
                // 牵扯跨域
                this.downloadNetMethod(tempImg.src, '海报')
            });
        },
        downloadLocMethod:function(src,name){//下载图片地址和名称
            // // document.body.appendChild(oImg);  // 将生成的图片添加到body
                var eleLink = document.createElement("a");
                eleLink.href = src; // 转换后的图片地址
                eleLink.download = name;
                document.body.appendChild(eleLink);
                // 触发点击
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
        },
        downloadNetMethod:function(imgsrc, name) {//下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },

站在巨人的肩膀上，学习就是香。

鸣谢