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. [agc004c]and grid

    别问我为什么咕了两天 题意: 给出一个$H\times W$的网格图A,仅由'.'和'#'构成,边界上没有'#'且至少有一个'#'.构造两个网格图B和C,大小均为$H\times W$,要求A中为'# ...

  2. CF1015F Bracket Substring (KMP+DP)

    题目大意:给你一个长度为$n$的括号序列$T$,要求你构造一个长度为$2n$的括号序列$S$,保证这个括号序列在插入数字后一定是正确的,并且$T$是$S$的一个子串 还以为是什么纯粹的数学构造题,一通 ...

  3. 华为P30系列新增“无线投屏”功能

    3月26日法国巴黎全球首发之后,4月11日华为又移师上海举办2019春季新品发布盛典,新一代拍照旗舰P30.P30 Pro正式登陆国内. 除了感光徕卡四摄带来的“彩色夜视仪“+“望远镜”的震撼拍照效果 ...

  4. vsftpd服务程序的三种认证模式

    vsftpd服务程序的三种认证模式的配置方法——匿名开放模式.本地用户模式以及虚拟用户模式.了解PAM可插拔认证模块的原理.作用以及实战配置方法,通过实战课程进一步继续学习SELinux服务的配置方法 ...

  5. 死锁的Dump文件

    死锁的Dump文件 package com.stono.thread; public class DeadLockDemo { private static String A = "A&qu ...

  6. [AngularJS] ng-ture-value & ng-false-value

    When you have a checkbox, not necessary that just 'ture' & 'false', you might have 'yes', 'no', ...

  7. [LeetCode]Median of Two Sorted Arrays 二分查找两个有序数组的第k数（中位数）

    二分.情况讨论 因为数组有序,所以能够考虑用二分.通过二分剔除掉肯定不是第k位数的区间.如果数组A和B当前处理的下标各自是mid1和mid2.则 1.假设A[mid1]<B[mid2], ①.若 ...

  8. 二维码框架ZBarSDK的使用和自己定义二维码扫描界面方法

    假设你不知道ZBarSDK怎么用,请下载demo http://download.csdn.net/detail/u013686641/7858917 假设你已经配置好ZBarSDK .那么以下这个类 ...

  9. storm trident function函数

    package cn.crxy.trident; import java.util.List; import backtype.storm.Config; import backtype.storm. ...

  10. mysql-基础和基本指令

    基础: 1.数据库模式:简单的说:就是一个数据库用户所拥有的数据库的对象.   比如scott用户建立了表,索引,视图,存储过程等对象,那么这些对象就构成了schema   scott .有时用作数据 ...