vue点击把某个区域变成图片数据

前言：

      使用html2canvas，可以实现把某个区域变成图片的base64数据

官网入口：点我

目录：

实现步骤：

1、引入

npm引入：

js引入：

2、在需要使用的vue组件中引入： 

3、将制定区域内转成图片,添加ref标记

4、点击开始转换的方法

到这里，把页面转成图片的步骤就结束了

如果需要下载的话，请继续往下走：

5、同源下载：

6、不同源，跨域的话用这个

到此就结束了！

---

实现步骤：

1、引入

npm引入：

cnpm install --save html2canvas

js引入：

             html2canvas.js 

             html2canvas.min.js

2、在需要使用的vue组件中引入： 

import html2canvas from "html2canvas"

3、将制定区域内转成图片,添加ref标记

<div class="container" ref="imageDom"></div>

4、点击开始转换的方法

/**
* 将页面指定节点内容转为图片 
* 1.拿到想要转换为图片的内容节点DOM；    
* 2.转换，拿到转换后的canvas    
* 3.转换为图片
*/

clickGeneratePicture() { //生成图片
    html2canvas(this.$refs.imageDom).then(canvas => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
    });
}

到这里，把页面转成图片的步骤就结束了

如果需要下载的话，请继续往下走：

5、同源下载：

var link = document.createElement("a");
link.href = this.imgUrl; // 转换后的图片地址 this.imgUrl == 上面你的baseurl
link.download = "你的图片名字";
document.body.appendChild(link);

eleLink.click();// 触发点击
document.body.removeChild(link);// 然后移除

6、不同源，跨域的话用这个

//下载图片地址和图片名
downloadIamge(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;
},

downImg(){
    this.downloadIamge(this.pic.url, 'pic')
}

到此就结束了！