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");
裁剪图片