资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/分享cropper剪切单张图片demo

分享cropper剪切单张图片demo

番茄西红柿 / 3009人阅读

摘要：上传头像这个一定要设置是容器的大小

</>复制代码 
  1. DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>上传头像title>
  6.     <link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
  7.     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  8.     <style type="text/css">
  9.         body{
  10.             text-align: center;
  11.         }
  12.         #user-photo {
  13.             width:300px;
  14.             height:300px;
  15.             margin-top: 10px;
  16.         }
  17.         #photo {
  18.             max-width:100%;
  19.             max-height:350px;
  20.         } //这个一定要设置,是容器的大小
  21.         .img-preview-box {
  22.             text-align: center;
  23.         }
  24.         .img-preview-box > div {
  25.             display: inline-block;;
  26.             margin-right: 10px;
  27.         }
  28.         .img-preview {
  29.             overflow: hidden;
  30.         }
  31.         .img-preview-box .img-preview-lg {
  32.             width: 150px;
  33.             height: 150px;
  34.         }
  35.         .img-preview-box .img-preview-md {
  36.             width: 100px;
  37.             height: 100px;
  38.         }
  39.         .img-preview-box .img-preview-sm {
  40.             width: 50px;
  41.             height: 50px;
  42.             border-radius: 50%;
  43.         }
  44.     style>
  45. head>
  46. <body>
  47. <button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开button><br/>
  48. <div class="user-photo-box">
  49.     <img id="user-photo" src="">
  50. div>
  51. div>
  52. <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
  53.     <div class="modal-dialog">
  54.         <div class="modal-content">
  55.             <div class="modal-header">
  56.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
  57.                 <h4 class="modal-title text-primary">
  58.                     <i class="fa fa-pencil">i>
  59.                     更换头像
  60.                 h4>
  61.             div>
  62.             <div class="modal-body">
  63.                 <p class="tip-info text-center">
  64.                     未选择图片
  65.                 p>
  66.                 <div class="img-container hidden">
  67.                     <img src="" alt="" id="photo">
  68.                 div>
  69.                 <div class="img-preview-box hidden">
  70.                     <hr>
  71.                     <span>150*150:span>
  72.                     <div class="img-preview img-preview-lg">
  73.                     div>
  74.                     <span>100*100:span>
  75.                     <div class="img-preview img-preview-md">
  76.                     div>
  77.                     <span>30*30:span>
  78.                     <div class="img-preview img-preview-sm">
  79.                     div>
  80.                 div>
  81.             div>
  82.             <div class="modal-footer">
  83.                 <label class="btn btn-danger pull-left" for="photoInput">
  84.                     <input type="file" class="sr-only" id="photoInput" accept="image/*">
  85.                     <span>打开图片span>
  86.                 label>
  87.                 <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交button>
  88.                 <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消button>
  89.             div>
  90.         div>
  91.     div>
  92. div>
  93. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
  94. <script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js">script>
  95. <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
  96. <script type="text/javascript">
  97.     var initCropperInModal = function(img, input, modal){
  98.         var $image = img;
  99.         var $inputImage = input;
  100.         var $modal = modal;
  101.         var options = {
  102.             aspectRatio: 1, // 纵横比
  103.             viewMode: 2,
  104.             preview: .img-preview // 预览图的class名
  105.         };
  106.         // 模态框隐藏后需要保存的数据对象
  107.         var saveData = {};
  108.         var URL = window.URL || window.webkitURL;
  109.         var blobURL;
  110.         $modal.on(show.bs.modal,function () {
  111.             // 如果打开模态框时没有选择文件就点击“打开图片”按钮
  112.             if(!$inputImage.val()){
  113.                 $inputImage.click();
  114.             }
  115.         }).on(shown.bs.modal, function () {
  116.             // 重新创建
  117.             $image.cropper( $.extend(options, {
  118.                 ready: function () {
  119.                     // 当剪切界面就绪后，恢复数据
  120.                     if(saveData.canvasData){
  121.                         $image.cropper(setCanvasData, saveData.canvasData);
  122.                         $image.cropper(setCropBoxData, saveData.cropBoxData);
  123.                     }
  124.                 }
  125.             }));
  126.         }).on(hidden.bs.modal, function () {
  127.             // 保存相关数据
  128.             saveData.cropBoxData = $image.cropper(getCropBoxData);
  129.             saveData.canvasData = $image.cropper(getCanvasData);
  130.             // 销毁并将图片保存在img标签
  131.             $image.cropper(destroy).attr(src,blobURL);
  132.         });
  133.         if (URL) {
  134.             $inputImage.change(function() {
  135.                 var files = this.files;
  136.                 var file;
  137.                 if (!$image.data(cropper)) {
  138.                     return;
  139.                 }
  140.                 if (files && files.length) {
  141.                     file = files[0];
  142.                     if (/^image/w+$/.test(file.type)) {
  143.                         if(blobURL) {
  144.                             URL.revokeObjectURL(blobURL);
  145.                         }
  146.                         blobURL = URL.createObjectURL(file);
  147.                         // 重置cropper，将图像替换
  148.                         $image.cropper(reset).cropper(replace, blobURL);
  149.                         // 选择文件后，显示和隐藏相关内容
  150.                         $(.img-container).removeClass(hidden);
  151.                         $(.img-preview-box).removeClass(hidden);
  152.                         $(#changeModal .disabled).removeAttr(disabled).removeClass(disabled);
  153.                         $(#changeModal .tip-info).addClass(hidden);
  154.                     } else {
  155.                         window.alert(请选择一个图像文件！);
  156.                     }
  157.                 }
  158.             });
  159.         } else {
  160.             $inputImage.prop(disabled, true).addClass(disabled);
  161.         }
  162.     }
  163.     var sendPhoto = function(){
  164.         $(#photo).cropper(getCroppedCanvas,{
  165.             width:300,
  166.             height:300
  167.         }).toBlob(function(blob){
  168.             // 转化为blob后更改src属性，隐藏模态框
  169.             $(#user-photo).attr(src,URL.createObjectURL(blob));
  170.             $(#changeModal).modal(hide);
  171.         });
  172.     }
  173.     $(function(){
  174.         initCropperInModal($(#photo),$(#photoInput),$(#changeModal));
  175.     });
  176. script>
  177. body>
  178. html>

 

官方示例 https://fengyuanchen.github.io/cropper/

参考:https://segmentfault.com/a/1190000012344970

 

GPU云服务器 云服务器 html单张图片 html单张图片上传 图片剪切 php图片剪切

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2223.html

相关文章

  • 【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件

    摘要：在裁剪框外拖动鼠标会生成一个新的裁剪框。这个是裁剪框的纵横比，默认是不限制的。初始化完成后是否自动显示裁剪框自动显示的裁剪框的大小。方法的使用格式为手动显示裁剪框。 插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件，当时想实现用户资料的头像上传功能，并且能够预览图片，和对图片进行简单的裁剪、旋转，花了不少时间才看到了这个插件，感觉功能挺全面，代码实现起...

    阿罗 评论0 收藏0

  • 截取图片生成头像插件

    摘要：获取图片地址之后，进行截取图片这里推荐一个插件点这里，具体怎么用就不再赘述。等截取图片之后，需要将截取的文件转换为二进制大文件。调取接口，将二进制大文件上传即可。 上传头像插件 目的： 帮助开发者快速开发上传头像功能点 背景： 现在b，g能搜到的头像上传插件并不太好用，所以想提供一个比较自由度的上传并且可以剪切的插件。 资源： 具体资源请查看这里 实现大致思路如下： 先有一个上传的...

    scq000 评论0 收藏0

  • 截取图片生成头像插件

    摘要：获取图片地址之后，进行截取图片这里推荐一个插件点这里，具体怎么用就不再赘述。等截取图片之后，需要将截取的文件转换为二进制大文件。调取接口，将二进制大文件上传即可。 上传头像插件 目的： 帮助开发者快速开发上传头像功能点 背景： 现在b，g能搜到的头像上传插件并不太好用，所以想提供一个比较自由度的上传并且可以剪切的插件。 资源： 具体资源请查看这里 实现大致思路如下： 先有一个上传的...

    Aceyclee 评论0 收藏0

  • JQuery 插件图片裁剪插件cropper.js使用,上传

    摘要：图片裁剪，压缩是上传图片一定会遇到的问题。如何获得裁剪的图片呢获取裁剪后的图片信息首先我们可以获得裁剪框的节点然后调用图片质量图片质量越好图片大小越大这样就得到了你裁剪的图片了可以通过，放到你想要的节点里展示。 图片裁剪，压缩是上传图片一定会遇到的问题。这里把我测试cropper.js这款jquery插件的心得分享一下，可以给新手做参考。 引入插件相关文件,你们down到本地也可以。这...

    SHERlocked93 评论0 收藏0

  • 移动端cropper.js 裁剪图片并上传

    摘要：参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据 参考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML结构 头像 ...

    since1986 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<