前端对图片处理的方法总结

将以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格式！