The problems encountered are that the pictures uploaded by the Apple mobile phone will automatically rotate, and the pictures to be cropped on the Android mobile phone cannot be scaled (the cause iscroll plug-in bug found on github, replace it with the 2.X version to fix it), the pit has been filled
Article reference https://www.npmjs.com/package/photoclip
file path:
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 part:
<div class="addCon">
<div class="addBox">
<p class='addBoxText1'>When taking pictures, please push the bangs behind your ears and make sure your face is clear</p>
<p class='addBoxText2' >Upload photos</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">Confirm</button>
<button id="albumRest">重拍</button>
</div>
<div id="view" class="hide"></div>
</article>
js part:
<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("照片读取中"); }, }, console.log("Photo read complete"); loadComplete: function() {
done: function(dataURL) { $(".loadMask").show();//Animation in background analysis console.log(dataURL); }, fail: function(msg) { console.log(msg); } });