1、封装工具函数,将url地址,转换为base64格式输出
function getBase64(url, callback) {
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
var Img = new Image(),
dataURL = '';
//Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错;
//Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
//下面已修正ios的兼容微信打开失败的原因
Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错;
Img.onload = function () { //要先确保图片完整获取到,这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
width = Img.width, //确保canvas的尺寸和图片一样
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
callback ? callback(dataURL) : null; //调用回调函数
};
}
getBase64('http://p1.pstatp.com/large/435d000085555bd8de10', (dataURL) => { console.log(dataURL) })
如果图片是oss 要在后台设置白名单 否则提示跨域
参考网站https://blog.csdn.net/qq_42991509/article/details/100925856
以上办法,ios的微信生成失败,参考文章https://blog.csdn.net/DavidFFFFFF/article/details/95217076
有没有注意到crossOrigin属性是在src属性之后赋值的;/(ㄒoㄒ)/~~
crossOrigin属性必须在src属性之前赋值
crossOrigin属性必须在src属性之前赋值
crossOrigin属性必须在src属性之前赋值
尽管没有找到准确的文档明确指定crossOrigin属性必须在src属性之前赋值,但是要适配IOS确实要这么做;
大家如果对 crossorigin 有疑问可以看一下MDN对crossorigin的解释:
————————————————
版权声明:本文为CSDN博主「DavidFFFFFF」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/DavidFFFFFF/java/article/details/95217076
如果在微信调试的话,可以使用这个捕捉错误信息
try {
// 将canvas对象转化为image/png
dataURL = canvas.toDataURL('image/jpeg')
alert(dataURL)
} catch (err) {
alert(err)
}