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;
    }