直接看代码

imgUrlToFile(url) { var self = this; var imgLink = url; var tempImage = new Image(); //如果图片url是网络url，要加下一句代码 tempImage.crossOrigin = "*"; //跨域不可用 tempImage.onload = function() { var base64 = self.getBase64Image(tempImage); //console.log(base64); imgblob = self.base64toBlob(base64); //获取原文件名称 var filename = self.getFileName(self.ruleForm.coverUrl); self.ruleForm.coverFile = self.blobToFile(imgblob, filename); }; tempImage.src = imgLink; }, getBase64Image(img) { //通过canvas绘制图片转base64 var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); var dataURL = canvas.toDataURL("image/" + ext); return dataURL; }, base64toBlob(base64) { //base64转Blob let arr = base64.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 Blob([u8arr], { type: mime }); }, blobToFile(blob, filename) { //Blob转file对象 // edge浏览器不支持new File对象，所以用以下方法兼容 blob.lastModifiedDate = new Date(); blob.name = filename; return blob; }, getFileName(url) { // 获取到文件名 let pos = url.lastIndexOf("/"); // 查找最后一个/的位置 return url.substring(pos + 1); // 截取最后一个/位置到字符长度，也就是截取文件名 }, //imgUrlToFile(),调用该方法就可以得到file对象

?

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。