canvas画图整理

场景1：使用JavaScript将图片拷贝进画布

function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

场景2：将画布导出图片

function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

场景3：canvas实现分享

// 基于html2canvas插件cnpm install html2canvas -S

    


分享
async goShare(){
    let dom = this.$refs["shareDom"];
    const res = await html2canvas(dom, { 
        width: parseInt(window.getComputedStyle(dom).width),
        height: parseInt(window.getComputedStyle(dom).height),
        allowTaint: true,
        taintTest: false, 
        scale: window.devicePixelRatio, // 设备像素比
        ignoreElements:(element)=>{ // 可从渲染中删除匹配的元素
            if(element.className === 'exclude') return true;
        },
    })
    this.imgUrl = res.toDataURL()
}