Cropper插件实现图片缩放

实现效果:

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

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

index.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();

})();

你可能感兴趣的:(web,jquery,插件)