js插件---强大的图片裁剪Cropper
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>×</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的更多相关文章
- 图片裁剪 cropper.js 上传组件封装 vue
//HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...
- 基于jQuery功能非常强大的图片裁剪插件
今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...
- PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例
PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看 ...
- 图片裁剪(cropper)后上传问题
最近工作需要处理头像裁剪以及上传,研究了几天,写点心得,提醒自己记住踩过的坑,能帮助别人当然更好. 功能基本就是这样: 这里需要注意的是:拿到需求后,不要急于直接上手,花费半个小时,甚至更长时间缕清整 ...
- 通过jquery.transit.min.js插件，实现图片的移动
首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 5 款最新的 jQuery 图片裁剪插件
这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...
- 启用lazyload插件，减少图片加载
使用lazyload的js插件,减少图片加载,提高页面加载速度和节省流量.虽然这个头像是第三方服务器来的,不消费博客的流量,但是能节省部分访客的加载时间,也是不错的哦. 用lazyload插件,只是后 ...
- cropper.js图片裁剪
最近做电子名片的项目,可是个人照片展示上出现了 用户上传的图片尺寸严重失调,所以要求进行图片裁剪,再此我对图片裁剪进行调研 还不太成熟 以后再改 这个实现的原理是 前台获取到 坐标 图片的尺寸 原图文 ...
随机推荐
- 【Python常见问题总结】
1. python2 中 end = '' 取消换行没有用 解决办法: 在程序开始加入 from __future__ import print_function 2. 如何在电脑上同时使用pytho ...
- Springboot - -web应用开发-Servlets, Filters, listeners
一.Web开发使用 Controller 基本上可以完成大部分需求,但是我们还可能会用到 Servlet. Filter. Listener等等 二.在spring boot中的三种实现方式 方法一: ...
- Linux学习02--Linux一切皆文件
Linux学习第二部 Linux一切皆对象 啊啊啊啊啊,今天被学妹说太直了,嘤嘤嘤. 学习linux两三天了,前期感觉并不难,只是命令多,多记记多敲一敲就能都记住了.希望自己能够坚持下去吧! 下面是根 ...
- MHA搭建及故障维护
MHA是一种方便简单可靠的MySQL高可用架构,具体的介绍我在这里就不多说了,下面是我在网上找的一个教程,我在此基础上进行了一些修改: 大致步骤 (一).环境介绍 (二).用ssh-keygen实现四 ...
- thinkphp 5.0整合phpsocketio完整攻略，绕坑
使用环境: thinkphp5.0 项目需求 前端下单,后台接受,并立即做出提示.例如:美团外卖,客户端下单成功后,商家端就会立即有接单语音提示. 开发环境 thinkphp5.0 phpsocket ...
- GenIcam标准（一）
1.概述 如今的数码摄相机包含了很多的功能,而不仅仅是采集图像.对于机器视觉相机来说,处理图像并把结果附加到图像数据流上,控制附加的硬件,代替应用程序作实时的处理等都是很平常的事情.这也导致了相机的编 ...
- 【转】C#正则表达式教程和示例
[转]C#正则表达式教程和示例 有一段时间,正则表达式学习很火热很潮流,当时在CSDN一天就能看到好几个正则表达式的帖子,那段时间借助论坛以及Wrox Press出版的<C#字符串和正则表达式参 ...
- 使用IR2101半桥驱动电机的案例
作为一个电机驱动开发方面的菜鸟,近日研究了一下通过MOS管对整流后的电源斩波用以驱动直流电机进行调速的方案. 在驱动的过程中,遇到了很多问题,当然也有很多的收获. 写下来以供自己将来查阅,也为其他菜鸟 ...
- Java实现二叉树的创建、递归/非递归遍历
近期复习数据结构中的二叉树的相关问题,在这里整理一下 这里包含: 1.二叉树的先序创建 2.二叉树的递归先序遍历 3.二叉树的非递归先序遍历 4.二叉树的递归中序遍历 5.二叉树的非递归中序遍历 6. ...
- SVN过滤设置
为了方便管理我们的系统版本号.非常多人会用到SVN,开发中我们经经常使用到SVN插件, 可是对于某些文件的缓存来说, 我们仅仅要有操作缓存便会保存一次, 每次提交非常是麻烦, 可能有的文件或者目录我们 ...