手机端的多图片剪辑上传支持手势支持预览

来源：互联网发布：阿里云美国服务器 vpn 编辑：程序博客网时间：2024/05/16 19:05

上篇PC端的多图片剪辑上传发错地方了。。。我发下链接点击打开链接

这次基于photoClip找了一个事例，然后改装了一下，使其支持多图片，可控数目，可预览，可剪辑，支持手势放大缩小

<!doctype html>
<html lang="zh-CN" id="index">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="keywords" content="">
<meta name="description" content="">
<title>图片裁剪</title>
<style>
body {
margin: 0;
text-align: center;
}
.clipArea {
margin: 20px;
height: 300px;
display: none;
}
.file,.clipBtn {
margin: 20px;
}
.view {
margin: 0 auto;
width: 180px;
height: 100px;
display: none;
}
</style>
</head>
<body ontouchstart="">
<div id="show_img_0" class="show_div">
<div id="clipArea_0" class="clipArea"></div>
<input type="file" id="file_0" class="file" onchange="changeImg(0);" >
<button id="clipBtn_0" class="clipBtn">截取</button>
<button onclick="deleteImg(0)">删除</button>
<div id="view_0" class="view"></div>
<div>
<input type="text" value="" id="fileLeft_0" />
<input type="text" value="" id="fileRight_0"/>
</div>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.js"></script>
<script>
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//最大上传数目
var maxNum=3;
//文件名存放数组
var nameArray=[];
//遮盖层位置数组
var py=[];
//显示预览最大宽度
var maxWidth=360;
//显示预览最大高度
var maxHeight=200;
//为默认输入框加载插件参数可以是jquery对象也可以是dom
new bjj.PhotoClip("#clipArea_0", {
size: [maxWidth, maxHeight],
outputSize: [0, 0],
file: "#file_0",
view: "#view_0",
ok: "#clipBtn_0",
loadStart: function() {
console.log("图片读取中");
},
loadComplete: function() {
console.log("图片读取完成");
var thisCKFile=$("#clipArea_0");
if($.inArray(getFileName(thisCKFile.val()), nameArray)!=-1){
alert("图片重复");
deleteImg(0);
}
else{
$("#clipArea_0").css("display","block");
}
},
clipFinish: function(dataURL) {
$("#view_0").css("display","block");
$("#clipArea_0").css("display","none");
savePath(0);
savePy(0);
$("#fileLeft_0").val(py[0][0]);
$("#fileRight_0").val(py[0][1]);
console.log(dataURL);
}
})
var savePy=function(y){
var ps=$("#clipArea_"+y+" .photo-clip-view .photo-clip-moveLayer")[0].style.transform;
ps=ps.substring(ps.indexOf("(")+1,ps.indexOf(")")).replace("px","").replace("px","");
var objx;
var objTop;
objx=ps.substring(0,ps.indexOf(","));
objTop=ps.substring(ps.indexOf(",")+1);
var sp=new Array();
sp.push(objx);
sp.push(objTop);
py[y]=sp;
console.log(py)
/* var sp=new Array();
sp.push(obj.x);
sp.push(obj.y);
sp.push(maxWidth);
sp.push(maxHeight);
py[y]=sp; */
}
//创建下一个上传框
var createNextInput=function(k){
$(".show_div:last").after(
"<div id='show_img_"+k+"' class='show_div'>"+
"<div id='clipArea_"+k+"' class='clipArea'></div>"+
"<input type='file' id='file_"+k+"' class='file' onchange=(changeImg("+k+")) />"+
"<button id='clipBtn_"+k+"' class='clipBtn' >截取</button>"+
"<button onclick='deleteImg("+k+")'>删除</button>"+
"<div id='view_"+k+"' class='view' ></div><div><input type='text' value='' name='fileLeft' id='fileLeft_"+k+"'/><input type='text' value='' name='fileRight' id='fileRight_"+k+"'/></div></div>");
}
//删除图片
var deleteImg=function(y){
var files=$("#show_img_"+y);
if($("[id^='file_']").length!=1){
//所有输入框都有值，那么删除后需要重新加一条
if($("[id^='file_']:last").val()!=""){
createNextInput(y);
files.remove();
loader(y);
}
else{
files.remove();
}
}
//保留一个input框
else {
createNextInput(y);
files.remove();
loader(y);
}
py[y]=null;
nameArray[y]=null;
}
//当图片改变(图片加载完成) 如果未超过设定最大maxnum那么添加一个input框，并初始化插件
var changeImg=function(t){
if($("[id^='file_']").length<maxNum){
var fileid=$("[id^='file_']:last").attr("id");
fileid=fileid.substring(fileid.lastIndexOf("_")+1);
createNextInput(Number(fileid)+1);
loader(Number(fileid)+1);
}
else{
alert("最大值");
}
}
var savePath=function(y){
nameArray[y]= getFileName($("#file_"+y).val());
}
//初始化插件
var loader=function(t){
new bjj.PhotoClip("#clipArea_"+t, {
size: [maxWidth, maxHeight],
outputSize: [0, 0],
file: "#file_"+t,
view: "#view_"+t,
ok: "#clipBtn_"+t,
loadStart: function() {
console.log("图片读取中");
},
loadComplete: function() {
console.log("图片读取完成");
var thisCKFile=$("#file_"+t);
if($.inArray(getFileName(thisCKFile.val()), nameArray)!=-1){
alert("图片重复");
deleteImg(t);
}
else{
$("#clipArea_"+t).css("display","block");
}
},
clipFinish: function(dataURL) {
$("#view_"+t).css("display","block");
$("#clipArea_"+t).css("display","none");
savePath(t);
savePy(t);
$("#savePy").val(py);
$("#fileLeft_"+t).val(py[t][0]);
$("#fileRight_"+t).val(py[t][1]);
if($("[id^='file_']").length>=maxNum){
console.info("超过最大数目,不添加输入框");
}
console.log(dataURL);
console.log(nameArray);
}
})}
//获取文件名
var getFileName=function (fileval){
var fpath=fileval.lastIndexOf("\\");
return fileval.substring(fpath+1);
}
//clipArea.destroy();
</script>

</body>
</html>

demo链接度娘盘

很简洁的demo,可以在我基础上改进。

0 0