js 图片转换为指定大小的DataUrl

将图片转换为指定大小的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 + " />");
			}
		}
	}
}

IT文库 » js 图片转换为指定大小的DataUrl
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址