遇到的问题有,苹果手机上传的图片会自动旋转,安卓手机上要裁剪图片的无法进行缩放(github上查到原因iscroll插件的bug,替换到2.X版本可修复),已填坑
文章参考https://www.npmjs.com/package/photoclip
文件路径:
http://imagesouth.xxlimageim.com/hammer.min.js
http://imagesouth.xxlimageim.com/iscroll-zoom-min.js
http://imagesouth.xxlimageim.com/lrz.all.bundle.js
http://imagesouth.xxlimageim.com/PhotoClip.js
html部分:
<div class="addCon">
<div class="addBox">
<p class='addBoxText1'>拍照时请将刘海撩至耳后,同时保证面部清晰哦</p>
<p class='addBoxText2'>上传照片</p>
</div>
</div>
<article class="zzsc-container">
<div id="clipArea" class="hide"></div>
<input type="file" id="file" class="hide">
<div class="cropper-buttons ">
<button id="albumConfirm">确认</button>
<button id="albumRest">重拍</button>
</div>
<div id="view" class="hide"></div>
</article>
js部分:
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom-min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
var clipArea = new PhotoClip("#clipArea", {
size: [350, 262],
//outputSize: [640, 640],
file: "#file",
view: "#view",
ok: "#albumConfirm",
loadStart: function() {
$(".addCon").addClass("hide");
$("#clipArea").removeClass("hide").css({"display":"block"});
$(".zzsc-container").removeClass("hide").css({"display":"block"});
console.log("照片读取中");
},
loadComplete: function() {
console.log("照片读取完成");
},
done: function(dataURL) {
$(".loadMask").show();//后台分析中的动画
console.log(dataURL);
},
fail: function(msg) {
console.log(msg);
}
});