问题
从其他网页粘贴过来的图片,有些后端不能正确下载保存。于是变成前端请求后,再传入后端。
思路
获取img标签的src属性值,除了本地图片都再次请求获取图片信息(图片信息还有一种filereader方法,但是此方法读取不了网页粘贴过来的图片信息,只能本地图片)。
代码
//上传图片
var getBase64Image = function(img) { //将图片转化为base64,后用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;
};
var dataURLtoBlob = function(dataurl) { //将base64转换为blob
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 Blob([u8arr], { type: mime });
};
var blobToFile = function(theBlob){ //将blob转换为file
theBlob.lastModifiedDate = new Date();
return theBlob;
};
var imgReg = /<img.*?(?:>|\/>)/ig; //匹配图片
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配src属性
var arr = param['content'].match(imgReg) || [];
for (var i = 0; i < arr.length; i++) {
var src = arr[i].match(srcReg)[1];
if(src && checkSearchTypeServices.check(src) == 'url'){
var image = new Image();
image.setAttribute("crossOrigin",'anonymous');
image.src = $('<div>').html(src).text();
image.onload = function(){
var base64 = getBase64Image(image);
var blob = dataURLtoBlob(base64);
var headers = {};
headers[$rootScope.csrf.header] = $rootScope.csrf.token;
var formData = new FormData();
formData.append('file', blobToFile(blob));
$.ajax({
url:"/common/aptFile/uploadImage",
type:"post",
headers: headers,
data:formData,
processData:false,
contentType:false
});
};
};
};