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相关联了

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

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

  1. 24                 console.log(result);
  2. 25                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);
  3. 26                 $('#download').attr('href', result.toDataURL('image/jpeg'));
  4. 27                 console.log(result.toDataURL('image/jpeg'));

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

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

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

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

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

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

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

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

  1. 24                 console.log(result);
  2. 25                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);
  3. 26                 $('#download').attr('href', result.toDataURL('image/jpeg'));
  4. 27                 console.log(result.toDataURL('image/jpeg'));

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

二、强大的图片裁剪Cropper

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

1、截图

2、代码

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>Cropper</title>
  6.          <link rel="stylesheet" href="../dist/amazeui.min.css">
  7.          <link rel="stylesheet" href="../dist/amazeui.cropper.css">
  8.          <link rel="stylesheet" href="demo.css">
  9.          <script src="../dist/jquery.min.js" charset="utf-8"></script>
  10.          <script src="../dist/amazeui.min.js" charset="utf-8"></script>
  11.          <script src="../dist/cropper.min.js" charset="utf-8"></script>
  12.          <script src="demo.js" charset="utf-8"></script>
  13.      </head>
  14.      <body>
  15.          <div class="am-g">
  16.              <div class="am-u-md-9">
  17.                  <div class="img-container">
  18.                      <img id="image" alt="Picture">
  19.                  </div>
  20.              </div>
  21.              <div class="am-u-md-3">
  22.                  <div class="am-img-preview preview-lg am-circle"></div>
  23.                  <div class="am-img-preview preview-md am-circle"></div>
  24.                  <div class="am-img-preview preview-sm am-circle"></div>
  25.              </div>
  26.          </div>
  27.          <div class="am-g docs-buttons">
  28.              <fieldset>
  29.                  <legend>头像剪裁 1:1</legend>
  30.                  <div class="am-form-group am-form-file">
  31.                      <button type="button" class="am-btn am-btn-primary am-btn-sm">
  32.                          <i class="am-icon-cloud-upload"></i> 选择要上传的文件
  33.                          <input type="file" id="inputImage" name="file" accept="image/*">
  34.                      </button>
  35.                  </div>
  36.                  <div class="am-form-group">
  37.                      <div id="file-list"></div>
  38.                      <button type="button"
  39.                          class="am-btn am-btn-primary am-btn-sm"
  40.                          data-method="zoom"
  41.                          data-option="0.1">
  42.                          <i class="am-icon-search-plus"></i> 放大
  43.                      </button>
  44.                      <button type="button" class="am-btn am-btn-primary am-btn-sm"
  45.                          data-method="zoom"
  46.                          data-option="-0.1">
  47.                          <i class="am-icon-search-minus"></i> 缩小
  48.                      </button>
  49.                      <button type="button" class="am-btn am-btn-primary am-btn-sm js-modal-open"
  50.                          data-method="getCroppedCanvas">
  51.                          <i class="am-icon-camera"></i> 截取图像
  52.                      </button>
  53.                  </div>
  54.              </fieldset>
  55.          </div>
  56.          <div class="am-modal" tabindex="-1" id="cropped-modal">
  57.              <div class="am-modal-dialog">
  58.                  <div class="am-modal-hd"> 截取图像
  59.                      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
  60.                  </div>
  61.                  <div class="am-modal-bd"></div>
  62.                  <div class="am-modal-footer">
  63.                      <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">
  64.                      <button type="button" class="am-btn am-btn-primary">
  65.                          <i class="am-icon-download"></i>
  66.                              下载
  67.                      </button>
  68.                      </a>
  69.                  </div>
  70.              </div>
  71.          </div>
  72.      </body>
  73.  </html>

demo.js

  1.  $(function() {
  2.      'use strict';
  3.  
  4.      // 初始化
  5.      var $image = $('#image');
  6.      $image.cropper({
  7.          aspectRatio: '1',
  8.          preview: '.am-img-preview',
  9.          zoomOnWheel: false,
  10.      })
  11.  
  12.      // 事件代理绑定事件
  13.      $('.docs-buttons').on('click', '[data-method]', function() {
  14.          var $this = $(this);
  15.          var data = $this.data();
  16.          var result = $image.cropper(data.method, data.option, data.secondOption);
  17.  
  18.          switch (data.method) {
  19.  
  20.              case 'getCroppedCanvas':
  21.              if (result) {
  22.  
  23.                  // 显示 Modal
  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'));
  28.              }
  29.              break;
  30.          }
  31.      })
  32.  
  33.      // 上传图片
  34.      var $inputImage = $('#inputImage');
  35.      var URL = window.URL || window.webkitURL;
  36.      var blobURL;
  37.  
  38.      if (URL) {
  39.          $inputImage.change(function () {
  40.              var files = this.files;
  41.              var file;
  42.  
  43.              if (files && files.length) {
  44.                 file = files[0];
  45.  
  46.                 if (/^image\/\w+$/.test(file.type)) {
  47.                      blobURL = URL.createObjectURL(file);
  48.                      $image.one('built.cropper', function () {
  49.  
  50.                          // Revoke when load complete
  51.                         URL.revokeObjectURL(blobURL);
  52.                      }).cropper('reset').cropper('replace', blobURL);
  53.                      $inputImage.val('');
  54.                  } else {
  55.                      window.alert('Please choose an image file.');
  56.                  }
  57.              }
  58.  
  59.              // Amazi UI 上传文件显示代码
  60.              var fileNames = '';
  61.              $.each(this.files, function() {
  62.                  fileNames += '<span class="am-badge">' + this.name + '</span> ';
  63.              });
  64.              $('#file-list').html(fileNames);
  65.          });
  66.      } else {
  67.          $inputImage.prop('disabled', true).parent().addClass('disabled');
  68.      }
  69.  })
 

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. Python ftplib 模块关于 ftp的下载

    import ftplib import os import socket import sys HOST='192.168.216.193' DIRN='c:\\ftp\FTP.123' FILE= ...

  2. Cocos2dx 小技巧（十五）话说ScrollView的delegate实现过程

    附:本文參加了CSDN博客大赛.亲假设认为这篇文章不错,就大胆的来投上一票吧! !!http://vote.blog.csdn.net/Article/Details? articleid=34140 ...

  3. 转：移动建站工具（一）：分秒钟将Web网站移动化

      作者唐小引 移动建站工具Web移动化简易开发MobifyTOPMobile Joomla!MoFuseWordPress优化 摘要:时下移动端显然已是诸多企业都想要占领的重要阵地.但限于较小的屏幕 ...

  4. android 自己定义dialog并实现失去焦点（背景透明）的功能

    前言:因为在项目中须要用到更新显示动画的需求,所以想到了dialog,自己定义dialog不难.网上教程非常多,可是在实现dialog背景透明的需求时,遇到了一点问题.网上的一些方法在我的机器上并没有 ...

  5. IIS预编译提升载入速度

    当我们把站点部署在IIS7或IIS6S的时候,每当IIS或是ApplicationPool重新启动后,第一次请求站点反应总是非常慢.原因大家都知道(不知道能够參考这个动画说明ASP.NET网页第一个R ...

  6. centos7 配置redis

    文件上传 yum -y install lrzsz 安装redis部署前操作 同时下载redis-.tar.gz安装包 yum -y install gcc-c++ yum -y install tc ...

  7. Oozie框架基础

    * Oozie框架基础 官方文档地址:http://oozie.apache.org/docs/4.0.0/DG_QuickStart.html 除Oozie之外,类似的框架还有: ** Zeus:h ...

  8. Android带弹性的View

    在Android开发中ListView.ScrollView用到的频率相当高,可是一个优秀的应用我们能看到它里面的效果绝对不会那么死板,安卓原生的ListView和ScrollView都不能满足这个要 ...

  9. [ SQLServer ] 數字類型的欄位細節 - 轉載

    [MSSQL] 欄位開立(2) - decimal, numeric, float, real, money 的抉擇 https://dotblogs.com.tw/henryli/2015/06/1 ...

  10. 三分钟学会用SpringMVC搭建最小系统（超详细)_转载

    前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建S ...