html+Canvas+js 实现 图片的剪裁效果

html+Canvas 实现 图片的剪裁效果

   开发过程中我们上传图片的时候，有时需要保证图片尺寸的统一，以避免以固定尺寸显示图片时会出现拉伸问题。

 这是就需要在上传之前对图片进行裁剪后再上传图片。

 

我们裁剪图片将会用到canvas：

canvas是HTML5中的一个新元素，这个元素可以通过JavaScript用来绘制图形。例如可以用它来画图、合成图象、做一些动画等。

　　通常呢，我们在canvas上画图的方法是使用Image对象。基本上一些典型的图片格式(png，jpg，gif等都没有问题。好，那接下来我们就来使用它。

 

实现代码如下：

html:

				<canvas id="myCan" style="visibility: hidden" width="200" height="200"></canvas>

  js:

var can=document.getElementById("myCan");
		  var ctx=can.getContext("2d");

 裁剪图片并生成blob对象，准备上传到后台服务器

  document.querySelector("#files").addEventListener("change",function (e) {
			  // var previewImg = document.getElementById("previewImg");
			  var file=this.files[0];
			  var file_name=this.files[0].file_name;

			  var SIZE = parseInt(file.size/1024);
			  // if(SIZE