将以base64的图片url数据转换为Blob 可以直接上传文件
/**
* 将以base64的图片url数据转换为Blob 可以直接上传文件
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
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 : 'image/png'})
}
然后用FormData提交
var formData = new FormData()
//append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
formData.append("imageName",convertBase64UrlToBlob(base64URL))
Canvas 内容和 Img 图片相互转换的方法
// 使用JavaScript将图片拷贝进画布
// 要想将图片放入画布里,我们使用canvas元素的drawImage方法:
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
// 用JavaScript将画布保持成图片格式
// 如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
这段代码就能神奇的将canvas转变成PNG格式!