手机端剪切图片插件 php,html5移动端上传图片裁剪插件

特效描述：html5移动端 上传图片 裁剪插件。html5移动端图片裁剪。支持缩放。

代码结构

1. 引入JS

2. HTML代码

选择图片

使用

window.addEventListener("load",function(){

var $input = document.querySelector("input");

var $img = document.querySelector("img");

var $canvas = document.querySelector("canvas");

//选择图片

$input.addEventListener("change",function(){

$img.src = getFileUrl(this);

},false);

var myCrop;

require(["jquery", 'hammer', 'tomPlugin', "tomLib", 'hammer.fake', 'hammer.showtouch'], function($, hammer, plugin, T) {

document.addEventListener("touchmove", function(e) {

e.preventDefault();

});

var opts = {

cropWidth: $canvas.width,

cropHeight: $canvas.height

},

previewStyle = {

x: 0,

y: 0,

scale: 1,

rotate: 0,

ratio: 1

},

transform = T.prefixStyle("transform"),

myCrop = T.cropImage({

bindFile: $("input"),

enableRatio: false, //是否启用高清,高清得到的图片会比较大

canvas: $canvas, //放一个canvas对象

cropWidth: opts.cropWidth, //剪切大小

cropHeight: opts.cropHeight,

bindPreview: $("img"), //绑定一个预览的img标签

useHammer: true, //是否使用hammer手势，否的话将不支持缩放

oninit: function() {

},

onLoad: function(data) {

//用户每次选择图片后执行回调

resetUserOpts();

previewStyle.ratio = data.ratio;

$("img").attr("src", data.originSrc).css({

width: data.width,

height: data.height

}).css(transform, 'scale(' + 1 / previewStyle.ratio + ')');

myCrop.setCropStyle(previewStyle)

}

});

function resetUserOpts() {

$("canvas").hammer('reset');

previewStyle = {

scale: 1,

x: 0,

y: 0,

rotate: 0

};

$("img").attr("src", '');

};

$("canvas").hammer({

gestureCb: function(o) {

//每次缩放拖拽的回调

$.extend(previewStyle, o);

console.log("用户修改图片", previewStyle)

$("img").css(transform, "translate3d(" + previewStyle.x + 'px,' + previewStyle.y + "px,0) rotate(" + previewStyle.rotate + "deg) scale(" + (previewStyle.scale / previewStyle.ratio) + ")")

}

});

$("button").on("click", function() {

myCrop.setCropStyle(previewStyle)

var src = myCrop.getCropFile({});

window.location.href = src;

});

});

},false);