将图片转换为指定大小的DataUrl:
/**
* @description 将input-file选中图片文件转换为指定大小base64的DataURL
* element input-file元素(必须)
* width 图片转换后宽度(可选)
* height 图片转换后高度(可选)
**/
function toDataURL(element, width, height){
if (element.files && element.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(element.files[0]);
reader.onload = function(event){
var img = new Image();
img.src = event.target.result;
var c = document.createElement("canvas");
// width、height参数缺省时处理
if(width == null && height == null){
width = img.width;
height = img.height;
}else if(width == null){
var ratio = height / img.height;
width = img.width * ratio;
}else if(height == null){
var ratio = width / img.width;
height = img.height * ratio;
}
c.width = width;
c.height = height;
var ctx = c.getContext("2d");
img.onload = function(){
ctx.drawImage(this, 0, 0, width, height);
/** 这里进行图片处理后业务逻辑的处理 **/
//console.log(c.toDataURL(element.files[0].type))
$("body").append("<img id='test' src='" + c.toDataURL(element.files[0].type) + "' style='border:1px solid #f00;' widht=" + width +" height=" + height + " />");
}
}
}
}