PhotoClipの落とし穴

発生した問題は、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);                 }             });






おすすめ

転載: blog.csdn.net/u012011360/article/details/89452025