export default { getBase64(url, callback) { //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 省去了 append(),也就避免了文档冗余和污染 var Img = new Image(), dataURL = ''; Img.setAttribute('crossOrigin', 'Anonymous'); // 解决控制台跨域报错的问题 if (url.startsWith("blob")) { Img.src = url; }else { Img.src = url + '?v=' + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错; } // Img.src = /^data:image/.test(url) ? url : url + '?' + new Date().getTime() + '&v=' + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错; // Img.crossOrigin = "*"; // 解决控制台跨域报错的问题 Img.onload = function () { //要先确保图片完整获取到,这是个异步事件 var canvas = document.createElement('canvas'), //创建canvas元素 width = Img.width, //确保canvas的尺寸和图片一样 height = Img.height; canvas.width = width; canvas.height = height; canvas.setAttribute('crossOrigin', 'Anonymous'); // 解决控制台跨域报错的问题 canvas.getContext('2d').drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中 dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL callback ? callback(dataURL) : null; //调用回调函数 }; }, getImageFiles(urls, callback) { if (urls.length == 0) { callback([]) } var files = []; urls.forEach((url) => { this.setInitImg(url, (file) => { files.push(file); if (files.length == urls.length) { callback(files); } }); }); }, setInitImg(url, callback) { let img = url; let _ = this; let imgRes; this.getBase64(img, (dataURL) => { imgRes = this.dataURLtoFile(dataURL, img); console.log(imgRes); callback(imgRes); }); }, dataURLtoFile(dataurl, filename) { //将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png) var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); } }