通常，在做图片上传的时候，一般以file对象的形式传递。后端将图片上传服务器之后，当前端再次请求数据，拿到的图片为http开头的url。通过此url一般能满足页面展示的需求，如果需要再将此图片传送给后端，也能满足。但在图片在编辑更换后再次传送，且后端需要file对象接收时，单纯的url将不能满足需求，则需要将url地址转换为file对象。
简单做一个demo，以作后期回顾。
html部分
js部分
var fileUrl = 'http://pic27.nipic.com/20130222/10741105_154139938000_2.jpg' function fileProcess(fileUrl){ var demoImg = document.getElementById("demoImg"); demoImg.src = fileUrl var img = fileUrl; var image = new Image(); // 给img加上随机值一部分情况下能解决跨域 // image.src = img + '?time=' + new Date().valueOf(); image.src = img; // 允许跨域操作 image.setAttribute("crossOrigin",'anonymous'); image.onload = function(){ var base64 = getBase64Image(image); console.log(base64) var newFile = dataURLtoFile(base64,'img111'); console.log(newFile) demoImg.src=base64.dataURL; var blob = convertBase64UrlToBlob(base64); console.log(blob); } } // 将url转换为base64
function getBase64Image(img) { var demoCanvas = document.getElementById("demoCanvas"); demoCanvas.width = img.width; demoCanvas.height = img.height; var ctx = demoCanvas.getContext("2d"); ctx.drawImage(img, 0, 0, 300, 150); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = demoCanvas.toDataURL("image/"+ext); return { dataURL: dataURL, type: "image/"+ext }; } // 将url转换为blob
function convertBase64UrlToBlob(base64){ var urlData = base64.dataURL; var type = base64.type; var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}); } //将base64转换为file文件
function dataURLtoFile(dataurl, filename) { var arr = dataurl.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}); }