Cropper插件实现图片缩放

最新推荐文章于 2024-06-07 09:34:25 发布

zuci

最新推荐文章于 2024-06-07 09:34:25 发布

阅读量3.7k

点赞数 2

分类专栏： web 文章标签： jquery 插件

本文链接：https://blog.csdn.net/u012780336/article/details/73250614

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现效果：
这里写图片描述

Cropper 是一个简单的 jQuery 图像裁剪插件。它支持选项，方法，事件，触摸（移动），缩放，旋转。下载地址为：https://github.com/fengyuanchen/cropper

以下是用Cropper 实现图片缩放的例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>Cropper插件实现图片缩放</title>
    <script src="js/jquery.min.js" charset="utf-8"></script>
    <script src="js/cropper.js" charset="utf-8"></script>
    <link rel="stylesheet" href="css/cropper.css" charset="utf-8">
    <link rel="stylesheet" href="css/image.css" charset="utf-8">
</head>
<body>

    <div class="show-image">
        <img src="./img/image.jpg">
    </div>

    <!--全屏显示可缩放的图片-->
    <div class="full-screen-bg hide">
        <div class="full-screen-img">
            <img id="viweImg" src="">
        </div>
    </div>

<script src="js/showImg.js"></script>
</body>
</html>

image.css

body {
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  font: 1.2rem/1.5 "Helvetica Neue", Helvetica, STHeiTi, "Droid Sans Fallback", "Microsoft YaHei";
  background: #f1ffe3;
  -webkit-text-size-adjust: none !important;
}
.show-image {
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.show-image img {
  width: 80%;
}
.full-screen-bg {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background: black;
  z-index: 1;
}
.full-screen-bg .full-screen-img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.full-screen-bg .full-screen-img .cropper-container {
  overflow: inherit;
}
.full-screen-bg .full-screen-img img {
  width: 100%;
}
.hide {
  display: none;
}

showImg.js

var ShowImg = (function () {

    function events(){

        $(".show-image").click(function(){

            var imgSrc = $(".show-image img").attr("src");
            $(".full-screen-bg").removeClass("hide");

            var viweImg = $('#viweImg');
            viweImg.attr("src",imgSrc);
            viweImg.cropper({//使用cropper插件
                background:false,//是否在容器上显示网格背景
                autoCrop:false,//是否在初始化时允许自动剪裁图片
                dragCrop:false,//是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
                checkCrossOrigin: false
            });
        });

        $(".full-screen-bg").click(function(){
            $(".full-screen-bg").addClass("hide");
        });


    }
    events();

})();

zuci

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Cropper插件实现图片缩放

实现效果： Cropper 是一个简单的 jQuery 图像裁剪插件。它支持选项，方法，事件，触摸（移动），缩放，旋转。下载地址为：https://github.com/fengyuanchen/cropper以下是用Cropper 实现图片缩放的例子：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-
复制链接

扫一扫

专栏目录