图片转换为base64存入服务器

问题

从其他网页粘贴过来的图片，有些后端不能正确下载保存。于是变成前端请求后，再传入后端。

思路

获取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 = /|\/>)/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 = $('
').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
            });
        };
    };
};