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