jQuery上传图片裁剪区域并保存代码是一款选择上传图片弹出窗口对进行图片裁剪，保持图片上传代码。
js代码
<scriptsrc="plugins/cover_js/iscroll-zoom.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="plugins/cover_js/hammer.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="plugins/cover_js/lrz.all.bundle.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="plugins/cover_js/jquery.photoClip.min.js"type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript">//上传封面
//document.addEventListener('touchmove',function(e){e.preventDefault();},false);
varclipArea=newbjj.PhotoClip("#clipArea",{
size:[428,321],//截取框的宽和高组成的数组。默认值为[260,260]
outputSize:[428,321],//输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
//outputType:"jpg",//指定输出图片的类型，可选"jpg"和"png"两种种类型，默认为"jpg"
file:"#file",//上传图片的<inputtype="file">控件的选择器或者DOM对象
view:"#view",//显示截取后图像的容器的选择器或者DOM对象
ok:"#clipBtn",//确认截图按钮的选择器或者DOM对象
loadStart:function(){
//开始加载的回调函数。this指向fileReader对象，并将正在加载的file对象作为参数传入
$('.cover-wrap').fadeIn();
console.log("照片读取中");
},
loadComplete:function(){
//加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
console.log("照片读取完成");
},
//loadError:function(event){},//加载失败的回调函数。this指向fileReader对象，并将错误事件的event对象作为参数传入
clipFinish:function(dataURL){
//裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
$('.cover-wrap').fadeOut();
$('#view').css('background-size','100%100%');
console.log(dataURL);
}
});
//clipArea.destroy();
</script>
下载
|
|
置顶卡
变色卡