html2canvas 无法渲染网络图片 （JS把图片转换为base64格式）

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**