pc和移动端图片裁剪插件PhotoClip的踩坑

遇到的问题有,苹果手机上传的图片会自动旋转,安卓手机上要裁剪图片的无法进行缩放(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);
                }
            });

猜你喜欢

转载自blog.csdn.net/u012011360/article/details/89452025