分享cropper剪切单张图片demo
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>上传头像</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
text-align: center;
}
#user-photo {
width:300px;
height:300px;
margin-top: 10px;
}
#photo {
max-width:100%;
max-height:350px;
} //这个一定要设置,是容器的大小
.img-preview-box {
text-align: center;
}
.img-preview-box > div {
display: inline-block;;
margin-right: 10px;
}
.img-preview {
overflow: hidden;
}
.img-preview-box .img-preview-lg {
width: 150px;
height: 150px;
}
.img-preview-box .img-preview-md {
width: 100px;
height: 100px;
}
.img-preview-box .img-preview-sm {
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button><br/>
<div class="user-photo-box">
<img id="user-photo" src="">
</div>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-primary">
<i class="fa fa-pencil"></i>
更换头像
</h4>
</div>
<div class="modal-body">
<p class="tip-info text-center">
未选择图片
</p>
<div class="img-container hidden">
<img src="" alt="" id="photo">
</div>
<div class="img-preview-box hidden">
<hr>
<span>150*150:</span>
<div class="img-preview img-preview-lg">
</div>
<span>100*100:</span>
<div class="img-preview img-preview-md">
</div>
<span>30*30:</span>
<div class="img-preview img-preview-sm">
</div>
</div>
</div>
<div class="modal-footer">
<label class="btn btn-danger pull-left" for="photoInput">
<input type="file" class="sr-only" id="photoInput" accept="image/*">
<span>打开图片</span>
</label>
<button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button>
<button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var initCropperInModal = function(img, input, modal){
var $image = img;
var $inputImage = input;
var $modal = modal;
var options = {
aspectRatio: 1, // 纵横比
viewMode: 2,
preview: '.img-preview' // 预览图的class名
};
// 模态框隐藏后需要保存的数据对象
var saveData = {};
var URL = window.URL || window.webkitURL;
var blobURL;
$modal.on('show.bs.modal',function () {
// 如果打开模态框时没有选择文件就点击“打开图片”按钮
if(!$inputImage.val()){
$inputImage.click();
}
}).on('shown.bs.modal', function () {
// 重新创建
$image.cropper( $.extend(options, {
ready: function () {
// 当剪切界面就绪后，恢复数据
if(saveData.canvasData){
$image.cropper('setCanvasData', saveData.canvasData);
$image.cropper('setCropBoxData', saveData.cropBoxData);
}
}
}));
}).on('hidden.bs.modal', function () {
// 保存相关数据
saveData.cropBoxData = $image.cropper('getCropBoxData');
saveData.canvasData = $image.cropper('getCanvasData');
// 销毁并将图片保存在img标签
$image.cropper('destroy').attr('src',blobURL);
});
if (URL) {
$inputImage.change(function() {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) { if(blobURL) {
URL.revokeObjectURL(blobURL);
}
blobURL = URL.createObjectURL(file); // 重置cropper，将图像替换
$image.cropper('reset').cropper('replace', blobURL); // 选择文件后，显示和隐藏相关内容
$('.img-container').removeClass('hidden');
$('.img-preview-box').removeClass('hidden');
$('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
$('#changeModal .tip-info').addClass('hidden'); } else {
window.alert('请选择一个图像文件！');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
} var sendPhoto = function(){
$('#photo').cropper('getCroppedCanvas',{
width:300,
height:300
}).toBlob(function(blob){
// 转化为blob后更改src属性，隐藏模态框
$('#user-photo').attr('src',URL.createObjectURL(blob));
$('#changeModal').modal('hide');
});
} $(function(){
initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));
});
</script>
</body>
</html>
官方示例 https://fengyuanchen.github.io/cropper/
参考:https://segmentfault.com/a/1190000012344970
分享cropper剪切单张图片demo的更多相关文章
- android-调用系统的ContentPrivder获取单张图片实现剪切做头像及源代码下载
首先讲述这个小项目的特色: 1.调用系统的相冊应用获取单张图片 2.对单张图片进行剪切方便做成指定大小的头像图片 3.对获取图片的结果进行解析,使用三种方式进行. 首先看看效果图: 打开app,进入注 ...
- JavaScript实现单张图片上传功能
前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...
- 基于cropper.js的图片上传和裁剪
项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...
- webuploader只选择单张图片
webuploader只选择单张图片 一.总结 一句话总结: 在WebUploader.create中配置一下pick即可 pick: { id: '#filePicker', multiple:fa ...
- Ext & Java 上存图片 Demo
Ext & Java 上存图片 Demo Ext <html> <head> <script id="microloader" type=&q ...
- js实现单张图片（或者多张）的预览功能
这个是预览单张图片的,如果要预览多张图片,改下面红色标记的地方就好了 <html> <head> <meta http-equiv="Content-Typ ...
- Android生成二维码--保存和分享二维码图片
之前写过生成自定义二维码的两篇文章:<Android生成自定义二维码><Android生成二维码–拍照或从相册选取图片>,下面就介绍一下Android应用内如何保存以及分享二维 ...
- 微信分享缩略图，如何增加微信朋友圈分享链接的小图片? facebook、google+、twitter等分享的标签
微信分享缩略图 如何增加微信朋友圈分享链接的小图片?在网页的头部<head>标签内加上以下代码,图片路径自行修改.<head><div id='wx_pic' style ...
- 【Python】【Nodejs】下载单张图片到本地，Python和Nodejs的比较
Python版本: # 下载单张图片到本地,看用时多少 import urllib.request import datetime starttime = datetime.datetime.now( ...
随机推荐
- BZOJ3529: [Sdoi2014]数表(莫比乌斯反演 树状数组)
题意 题目链接 Sol 首先不考虑\(a\)的限制 我们要求的是 \[\sum_{i = 1}^n \sum_{j = 1}^m \sigma(gcd(i, j))\] 用常规的套路可以化到这个形式 ...
- 洛谷P4716 【模板】最小树形图(朱刘算法)
题意 题目链接 Sol 朱刘算法?感觉又是一种神仙贪心算法 大概就是每次贪心的用每个点边权最小的入边更新答案,如果不行的话就缩起来找其他的边 不详细说了,丢链接走人.. #include<bit ...
- 远景GIS云上线
没有发布会.没有嘉宾.没有掌声,趁着国庆假期悄悄地将系统部署到服务器上线运行. 远景GIS云(RGIS Cloud)基于自主研发的远景GIS基础平台开发,目前已实现了Shape上传和导出.符号配置.动 ...
- Wasserstein GAN
在GAN的相关研究如火如荼甚至可以说是泛滥的今天,一篇新鲜出炉的arXiv论文<Wasserstein GAN>却在Reddit的Machine Learning频道火了,连Goodfel ...
- ZABBIX 2.1.0 发布，分布式系统监控
ZABBIX 2.1.0 发布了,这相当是 ZABBIX 2.2 的首个 Alpha 版本,包括了新的主要的功能和改进. 主要包括如下几个方面的提升: 性能提升 可加载模块 移除对未知事件的支持 应用 ...
- OpenStack 学习笔记 （一）
后续的文章都贴在:臭蛋上 这一系列笔记已经记录很长一段时间了,种种原因没有贴出来,现在陆陆续续的贴出来.可能由于自己理解的 错误和疏忽,导致存在错误,欢迎大家指正,交流. 所有的源码分析都是基于Ope ...
- 使用公钥和私钥实现LINUX下免密登录
linux公钥私钥实现无密码登录 首先本地主机生成公约和私钥 # ssh-keygen /生成公钥和私钥 不要更改默认路径,中途不要输入密码,直接两次回车. 2. 将生成 ...
- SqlServer数据库(可疑)的解决办法
当数据库发生这种操作故障时,可以按如下操作步骤可解决此方法, 打开数据库里的Sql 查询编辑器窗口,运行以下的命令. // 1.使用指定值强制重新配置:(1.0表示为真假) sp_configure ...
- django1.8 增加注册用户其他字段（用户扩展）
在V1.6及之后版本已经删除get_profile()方法,需要使用userprofile. 1.新建moduel,名为UserProfile: class UserProfile(models.Mo ...
- Linux入门-9 软件管理基础(CentOS)
0. 源代码形式 1. RPM软件包管理 RPM RPM查询 RPM验证 2. YUM软件管理 YUM基本命令 YUM查询 创建YUM仓库 0. 源代码形式 绝大多数开源软件都是直接以源代码形式发布 ...