1、canvas需要本地的圖片
2、在使用html2canvas。大多數時候想動態載入網路的圖片，可是經常在PC端能顯示圖片，到了手機端就顯示不出來了。就是因為圖片跨域的問題引起的

html2canvas不是有配置可以解決跨域了嗎（useCORS: true,allowTaint: true）。的確是有的，可是在手機上就是不能渲染。

關於圖片跨域的，這裡就不多做說明，今天記錄一個繞開用canvas請求跨域圖片的方法：

        function convertImgToBase64(url, callback, outputFormat) {
            var canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                img = new Image;
            img.crossOrigin = 'Anonymous';
            img.onload = function() {
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                callback.call(this, dataURL);
                canvas = null;
            };
            img.src = url;
        }
 

根據方法名可以看出，這是一個跨域圖片轉化為Base64的方法

• 1、先生成一個畫布，設定畫布的基礎配置
• 2、new Image。建立一個圖片物件，img.crossOrigin 設定跨域請求。img.src = url;需要請求的圖片的路徑（網路圖片）。img.onload當圖片載入完成後執行
• 3、圖片載入完成後，就可以用畫布，先進行圖片的渲染。設定畫布寬高，最後也是用畫布的toDataURL方法，把圖片轉化為base64格式
• 這樣就大功告成了

完整程式碼示例：

 function convertImgToBase64(url, callback, outputFormat) {
            var canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                img = new Image;
	            img.crossOrigin = 'Anonymous';
	            img.onload = function() {
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                callback.call(this, dataURL);
                canvas = null;
            };
            img.src = url;
        }


        convertImgToBase64(‘http://你的圖片的路徑’, function(base64Img) {
            $("#code_img").attr('src', base64Img);
            html2canvas($('需要選擇的ID元素'), {
                useCORS: true,
                allowTaint: true
            }).then(function(canvas) {
                var ImgUrl = canvas.toDataURL();
            })
        });
 

這樣圖片就可以只加載一次，並且不需要用過畫布進行跨域請求。成功率大大提升

**THE END**