/**
-
发送请求到服务器上传对应的图片 保存为blob
-
@param {String} url 图片的路径
*/
function upLoadPhont(url) {
this.urlToBase64(url).then(base64 => {
var _base64 = base64.split(’,’)[1]//base64 == data:image/jpg;base64,/9j…
this.base64ToBlob({
b64data: _base64,
contentType: ‘image/png’
}).then(res => {
//res 就是blob
var formData = new FormData();
formData.append(“uploadFile”, res, ‘aaa.jpg’);//aaa.jpg 图片名称 uploadFile 很关键
formData.append(“logicId”, “75.10.02”);
$.ajax({
url: basePath + “/businesslogic_upload.json”,
type: “post”,
data: formData,
dataType: “json”,
processData: false,
contentType: false,
success: function(data) {
showPhoto(url, data);
}
});});});
}
function urlToBase64(url) {
//resolve 成功的回调函数，reject 失败的回调函数
return new Promise((resolve, reject) => {
let image = new Image();
image.onload = function() {
let canvas = document.createElement(‘canvas’);
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// 将图片插入画布并开始绘制
canvas.getContext(‘2d’).drawImage(image, 0, 0);
// result
let result = canvas.toDataURL(‘image/png’)
resolve(result);
};
image.setAttribute(“crossOrigin”, ‘Anonymous’);
image.src = url;
// 图片加载失败的错误处理
image.onerror = () => {
reject(new Error(‘图片流异常’));
};
});
}
// 原理：利用URL.createObjectURL为blob对象创建临时的URL
function base64ToBlob({
b64data = ‘’,
contentType = ‘’,
sliceSize = 512
} = {}) {
return new Promise((resolve, reject) => {
// 使用 atob() 方法将数据解码
let byteCharacters = atob(b64data);
let byteArrays = [];
for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);
let byteNumbers = [];
for(let i = 0; i < slice.length; i++) {
byteNumbers.push(slice.charCodeAt(i));
}
// 8 位无符号整数值的类型化数组。内容将初始化为 0。
// 如果无法分配请求数目的字节，则将引发异常。
byteArrays.push(new Uint8Array(byteNumbers));
}
let result = new Blob(byteArrays, {
type: contentType
});
result = Object.assign(result, {
// jartto: 这里一定要处理一下 URL.createObjectURL
preview: URL.createObjectURL(result),
name: 图片示例.png
});
resolve(result)
});
}