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. php include 和require的区别与转码

    php include 和require的区别相同点:include和require 都能把另外一个文件包含到当前文件中.  不同点:使用include时,当包含的文件不存在时,系统会报出警告级别的错 ...

  2. 紫书 习题 11-2 UVa 1001 （Floyd）

    这道题只是在边上做一些文章. 这道题起点终点可以看成半径为0的洞, 我是直接加入了洞的数组. 边就是两点间的距离减去半径, 如果结果小于0的话, 距离就为0, 距离不能为负 然后我看到n只有100, ...

  3. 洛谷——P2661 信息传递

    https://www.luogu.org/problem/show?pid=2661#sub 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其 ...

  4. Qt之图形（简笔画-绘制漂亮的西瓜）

    简述 Summer is coming-我们呢,为大家准备了丰盛的佳果-西瓜,清爽解渴,甘味多汁. 一笔一划学简笔画,分分钟让你掌握一门新技能,下面我们来绘制一个"盛夏之王"-西瓜 ...

  5. OC第二课

    主要内容:实例变量可见度.方法 一.实例变量可见度 public(共同拥有的):实例变量能够在类的内部和外部使用 protected(受保护的.默认的):实例变量仅仅能在该类及其子类中使用 priva ...

  6. js面向对象编程：怎样定义常量？

    js中有一个keywordconst,但眼下的浏览器似乎还不支持,假设一定要定义一些常量,事实上能够使用闭包,匿名函数实现常量的定义. 比如: var Class = (function() { va ...

  7. ubuntu 14.04 桌面版关闭图形界面

    ubuntu 14.04 桌面版关闭图形界面 问题: 怎样将ubuntu14.04设置为文本模式启动? 解决方式: 改动改GRUB 的配置文件(不建议直接改 grub.conf) $sudo vim ...

  8. cocos2dx下的A星算法

    这是我依据这篇博文http://hi.baidu.com/wsapyoemdfacmqr/item/bdfb5c0a74c904d01ef0466d.来在cocos2dx上编写.这是终于的效果图: 红 ...

  9. codeforces@281 B

    shui #include<iostream> #include<cstdio> #include<cstring> #include<algorithm&g ...

  10. 7.stack

    #include <iostream> #include <stack> #include <algorithm> #include <list> #i ...