js插件---强大的图片裁剪Cropper

一、总结

一句话总结：官网或者github里面的文档或者demo才是真的详细

使用的话找到图片裁剪后的base64数据，然后这个数据可下载可传递到服务器

1、本地运行出现Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported如何解决？

弄到服务器上面去运行就OK了

2、如何获取到裁剪后的图片的base64的数据？

a、首先发现这里提供裁剪好的图片的下载功能，所以知道一定是某段js代码将数据和这个下载的button相关联了

<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">

b、然后去js代码中找这个下载按钮出现的位置，一下子就搜索到了

24                 console.log(result);

25                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);

26                 $('#download').attr('href', result.toDataURL('image/jpeg'));

27                 console.log(result.toDataURL('image/jpeg'));

一下子就知道了result.toDataURL('image/jpeg')就是获取裁剪好的图片的base64的数据

3、如何将canvas转换为base64图片数据？

这里的result就是canvas，用的toDataURL方法

27                 console.log(result.toDataURL('image/jpeg'));

4、如何获取插件完整详细的API和demo？

官网或者github里面的文档或者demo才是真的详细

5、如何实现点击下载图片？

将a标签的href设置为图片的base64数据，那么点击这个a标签就是下载图片

24                 console.log(result);

25                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);

26                 $('#download').attr('href', result.toDataURL('image/jpeg'));

27                 console.log(result.toDataURL('image/jpeg'));

并且指定download可以指定下载图片的名字

二、强大的图片裁剪Cropper

百度盘下载地址：链接：https://pan.baidu.com/s/1LZtqQyIR-DNjjUDQ3XxK5A 密码：odgt

1、截图

2、代码

index.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>Cropper</title>

         <link rel="stylesheet" href="../dist/amazeui.min.css">

         <link rel="stylesheet" href="../dist/amazeui.cropper.css">

         <link rel="stylesheet" href="demo.css">

         <script src="../dist/jquery.min.js" charset="utf-8"></script>

         <script src="../dist/amazeui.min.js" charset="utf-8"></script>

         <script src="../dist/cropper.min.js" charset="utf-8"></script>

         <script src="demo.js" charset="utf-8"></script>

     </head>

     <body>

         <div class="am-g">

             <div class="am-u-md-9">

                 <div class="img-container">

                     <img id="image" alt="Picture">

                 </div>

             </div>

             <div class="am-u-md-3">

                 <div class="am-img-preview preview-lg am-circle"></div>

                 <div class="am-img-preview preview-md am-circle"></div>

                 <div class="am-img-preview preview-sm am-circle"></div>

             </div>

         </div>

         <div class="am-g docs-buttons">

             <fieldset>

                 <legend>头像剪裁 1:1</legend>

                 <div class="am-form-group am-form-file">

                     <button type="button" class="am-btn am-btn-primary am-btn-sm">

                         <i class="am-icon-cloud-upload"></i> 选择要上传的文件

                         <input type="file" id="inputImage" name="file" accept="image/*">

                     </button>

                 </div>

                 <div class="am-form-group">

                     <div id="file-list"></div>

                     <button type="button"

                         class="am-btn am-btn-primary am-btn-sm"

                         data-method="zoom"

                         data-option="0.1">

                         <i class="am-icon-search-plus"></i> 放大

                     </button>

                     <button type="button" class="am-btn am-btn-primary am-btn-sm"

                         data-method="zoom"

                         data-option="-0.1">

                         <i class="am-icon-search-minus"></i> 缩小

                     </button>

                     <button type="button" class="am-btn am-btn-primary am-btn-sm js-modal-open"

                         data-method="getCroppedCanvas">

                         <i class="am-icon-camera"></i> 截取图像

                     </button>

                 </div>

             </fieldset>

         </div>

         <div class="am-modal" tabindex="-1" id="cropped-modal">

             <div class="am-modal-dialog">

                 <div class="am-modal-hd"> 截取图像

                     <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>

                 </div>

                 <div class="am-modal-bd"></div>

                 <div class="am-modal-footer">

                     <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">

                     <button type="button" class="am-btn am-btn-primary">

                         <i class="am-icon-download"></i>

                             下载

                     </button>

                     </a>

                 </div>

             </div>

         </div>

     </body>

 </html>

demo.js

 $(function() {

     'use strict';

     // 初始化

     var $image = $('#image');

     $image.cropper({

         aspectRatio: '1',

         preview: '.am-img-preview',

         zoomOnWheel: false,

     })

     // 事件代理绑定事件

     $('.docs-buttons').on('click', '[data-method]', function() {

         var $this = $(this);

         var data = $this.data();

         var result = $image.cropper(data.method, data.option, data.secondOption);

         switch (data.method) {

             case 'getCroppedCanvas':

             if (result) {

                 // 显示 Modal

                 console.log(result);

                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);

                 $('#download').attr('href', result.toDataURL('image/jpeg'));

                 console.log(result.toDataURL('image/jpeg'));

             }

             break;

         }

     })

     // 上传图片

     var $inputImage = $('#inputImage');

     var URL = window.URL || window.webkitURL;

     var blobURL;

     if (URL) {

         $inputImage.change(function () {

             var files = this.files;

             var file;

             if (files && files.length) {

                file = files[0];

                if (/^image\/\w+$/.test(file.type)) {

                     blobURL = URL.createObjectURL(file);

                     $image.one('built.cropper', function () {

                         // Revoke when load complete

                        URL.revokeObjectURL(blobURL);

                     }).cropper('reset').cropper('replace', blobURL);

                     $inputImage.val('');

                 } else {

                     window.alert('Please choose an image file.');

                 }

             }

             // Amazi UI 上传文件显示代码

             var fileNames = '';

             $.each(this.files, function() {

                 fileNames += '<span class="am-badge">' + this.name + '</span> ';

             });

             $('#file-list').html(fileNames);

         });

     } else {

         $inputImage.prop('disabled', true).parent().addClass('disabled');

     }

 })
 

js插件---强大的图片裁剪Cropper的更多相关文章

  1. 图片裁剪 cropper.js 上传组件封装 vue

    //HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...

  2. 基于jQuery功能非常强大的图片裁剪插件

    今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...

  3. PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

    PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看 ...

  4. 图片裁剪(cropper)后上传问题

    最近工作需要处理头像裁剪以及上传,研究了几天,写点心得,提醒自己记住踩过的坑,能帮助别人当然更好. 功能基本就是这样: 这里需要注意的是:拿到需求后,不要急于直接上手,花费半个小时,甚至更长时间缕清整 ...

  5. 通过jquery.transit.min.js插件，实现图片的移动

    首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...

  6. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  7. 5 款最新的 jQuery 图片裁剪插件

    这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...

  8. 启用lazyload插件，减少图片加载

    使用lazyload的js插件,减少图片加载,提高页面加载速度和节省流量.虽然这个头像是第三方服务器来的,不消费博客的流量,但是能节省部分访客的加载时间,也是不错的哦. 用lazyload插件,只是后 ...

  9. cropper.js图片裁剪

    最近做电子名片的项目,可是个人照片展示上出现了 用户上传的图片尺寸严重失调,所以要求进行图片裁剪,再此我对图片裁剪进行调研 还不太成熟 以后再改 这个实现的原理是 前台获取到 坐标 图片的尺寸 原图文 ...

随机推荐

  1. Shiro结合Spring boot开发权限管理系统

    前一篇文章说了,我从开始工作就想有一个属于自己的博客系统,当然了,我想的是多用户的博客,大家都可以发文章记笔记,我最初的想法就是这样. 博客系统搭建需要使用的技术: 1.基于Spring boot 2 ...

  2. 【python爬虫和正则表达式】爬取表格中的的二级链接

    开始进公司实习的一个任务是整理一个网页页面上二级链接的内容整理到EXCEL中,这项工作把我头都搞大了,整理了好几天,实习生就是端茶送水的.前段时间学了爬虫,于是我想能不能用python写一个爬虫一个个 ...

  3. Generator 简介

    Generator 就是一种状态机,封装多个内部状态. 执行 Generator 函数会返回一个遍历器对象(),也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数.返回的遍历器对 ...

  4. iOS：UISplitViewController的创建

    UISplitViewController是iPad特有的系统方法,主要效果就是呈现iPad的经典切割界面 代码创建实例: - (BOOL)application:(UIApplication *)a ...

  5. hdoj-5099-Comparison of Android versions

    Comparison of Android versions Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...

  6. 【甘道夫】Sqoop1.99.3基础操作--导入Oracle的数据到HDFS

    第一步:进入clientShell fulong@FBI008:~$ sqoop.sh client Sqoop home directory: /home/fulong/Sqoop/sqoop-1. ...

  7. wsimport 使用方法具体解释

    wsimport 使用方法 本文主要介绍wsimport的简单使用方法.帮助大家在webserviceclient开发过程中生成接口代码: 打开java JDK文件夹我们会看到wsimport工具,这 ...

  8. [android]DES/3DES/AES加密方式

    DES 支持8位加密解密,3Des支持24位,Aes支持32位.3Des是Des算法做三次.位数的单位是字节byte.不是bits. 3Des是把24位分成3组.第一组八位用来加密,第二组8位用于解密 ...

  9. 【POJ 1845】 Sumdiv (整数唯分+约数和公式+二分等比数列前n项和+同余)

    [POJ 1845] Sumdiv 用的东西挺全 最主要通过这个题学了约数和公式跟二分求等比数列前n项和 另一种小优化的整数拆分  整数的唯一分解定理: 随意正整数都有且仅仅有一种方式写出其素因子的乘 ...

  10. CSDN博客2014年4月24日清理缓存

    亲爱的CSDN博主们.我们将于今天(2014年4月24日)对CSDN博客频道缓存进行清理,假设您登录后发现自己的文章总数.积分.评论数.訪问数出现异常,请不要慌张.您的数据并没有丢失.将会在缓存清理完 ...