HTML5_图片base64转码后Canvas截图

　　最近做过上传图片并截图的功能。在开发的过程中，由于涉及到图片跨域的问题，canvas无法成功截取图片。

　　后来在网上查询了相关资料，了解到需要将图片转换成base64编码的格式，才能成功截取。在简书中发现了一篇图片转换base64编码的文章，讲得比较简单清晰明了，示例程序也一目了然，虽然不是我想要的，但是值得推荐一下： https://www.jianshu.com/p/90fc1f9042a8

　　下面讲一下图片实现base64转码后使用html2canvas截图：

　　安装html2canvas包

npm install --save html2canvas

　　js中引入

import Html2canvas from "Html2canvas";

获取base64转码后的图片后，指定给需要获取的页面元素

/*
     * 将图片转换成base64并设置给某个dom元素
     */
    function getAndSetBase64(imgSrc, domObj){
        function getBase64Image(img, domObj, width, height) {
            var canvas = document.createElement("canvas");
            canvas.width = width ? width : img.width;
            canvas.height = height ? height : img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL();
            domObj.src = dataURL;
        }
        var image = new Image();
        image.crossOrigin = '';
        image.src = imgSrc;
        if(imgSrc){
            image.onload = function (){
                getBase64Image(image, domObj);
            }
        }
    }

获取canvas

Html2canvas(document.querySelector("#id")).then(canvas => {
                var shareImg = convertCanvasToImage(canvas);
                shareImg.style.width = '100%';
                shareImg.style.height = '100%';
      // 下面是canvas base64路径  ，img的src可以直接使用这个地址   
 6 　　　　console.log(encodeURIComponent(shareImg.src.split('base64,')[1])); 
});

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