発生した問題は、Apple携帯電話によってアップロードされた画像が自動的に回転し、Android携帯電話でトリミングされる画像を拡大縮小できないことです(原因はgithubにあるiscrollプラグインのバグです。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">
<buttonid = "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( "写真の読み取りが完了しました"); }、
完了:function(dataURL){ $( "。loadMask")。show(); //バックグラウンド分析でのアニメーション console.log(dataURL); }、 失敗:function(msg){ console.log(msg); } });