上次我们介绍过一款基于HTML5的图片马赛克效果,今天我们要来介绍一款基于jQuery的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠标拖动。
来看看实现的代码,这里我们主要来看JavaScript代码
获取图片的Canvas画布:
function getSourceCanvas(image, data) {
var canvas = $('<canvas>')[0],
context = canvas.getContext('2d'),
width = data.naturalWidth,
height = data.naturalHeight,
rotate = data.rotate,
rotated = getRotatedSizes({
width: width,
height:[......]
阅读全文>>