移动端实现裁剪图片生成base64图片(可缩放)

移动端实现裁剪图片生成base64图片(可缩放)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>{$title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <!-- Link Swiper's CSS -->
    <include file="commonheader" />
    <link href="/croppermaster/dist/cropper.css" rel="stylesheet">
    <style type="text/css">

    </style>
</head>

<body>
    <div class="box" style="width:100%;height:100%; position: absolute;left:0px; top:0px; z-index: 9999;background: #000;">
        <img  class="image" src="/croppermaster/dist/1.jpg">
  <div class="caijian" style="width:80px; height:30px; line-height: 30px; text-align: center; background: #0ac2ff; border-radius:10px; position: absolute;right:30px; bottom: 30px; color: #FFF;">确定</div>
    <div class="quxiaocaijian" style="width:80px; height:30px; line-height: 30px; text-align: center; background: #0ac2ff; border-radius:10px; position: absolute;left:30px; bottom: 30px; color: #FFF;">取消</div>
    <div style="width:100%; height: auto;overflow: hidden;">
        <img style="width:30%;" class="showpic" src="" alt="">
    </div>        
    </div>
  
    <include file="commonfooter" />
    <script src="/croppermaster/dist/cropper.js"></script>
    <script type="text/javascript">
    $(function() {
 $('.image').cropper({
            aspectRatio: 9 / 12,
            viewMode: 1,
            crop: function(e) {
                // console.log(e);
            }
        });

         //裁剪完压缩方法
        $('.caijian').on('click', function() {
              var result = $('.caijianpic').cropper("getCroppedCanvas", {
            width: 750,
            height: 1000
        });

            var base64img = result.toDataURL("image/jpg");
            $('.showpic').attr('src', base64img);
        })
        $('.quxiaocaijian').on('click', function() {
            $('.image').cropper("destroy")
        })

    })
    </script>
</body>

</html>

ps:这个案例是裁剪中状态的

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=1376

发表评论

电子邮件地址不会被公开。 必填项已用*标注