Cropper插件实现图片缩放

来源：互联网发布：h5实现的炫酷页面源码编辑：程序博客网时间：2024/06/05 00:31

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

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();})();

阅读全文

2 0