分享cropper剪切单张图片demo
2024-04-11 04:06:08
<!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
转载于:https://www.cnblogs.com/wangziyue/p/9089538.html
分享cropper剪切单张图片demo相关推荐
- cropper.js 裁剪图片并上传（文档翻译+demo）（转）
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/READM ...
- android-调用系统的ContentPrivder获取单张图片实现剪切做头像及源码下载
首先讲述这个小项目的特色: 1.调用系统的相册应用获取单张图片 2.对单张图片进行剪切方便做成指定大小的头像图片 3.对获取图片的结果进行解析,使用三种方式进行. 首先看看效果图: 打开app,进入注 ...
- vue改变html的背景,vue动态改变背景图片demo分享
如下所示: #bag{ width: 200px; height: 500px; margin: 0 auto; background: url(img/piao11.jpg) center no-r ...
- caffe ssd 测试demo,检测单张图片
原 SSD: Single Shot MultiBox Detector 检测单张图片 2016年10月29日 16:39:05 阅读数:19930 标签: python ssd ssd-detect ...
- ICON: 从单张图片重建穿衣服人体模型
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 作者丨人脸人体重建 来源丨人脸人体重建 马普所最新文章,穿衣服人体重建新方法 ICON (Implic ...
- CVPR 2019 | 基于骨架表达的单张图片三维物体重建方法
现有的单视角三维物体重建方法通过采用不同的几何形状表达方式取得了不同程度的成功,但它们都难以重建出拓扑复杂的物体形状.为此,华南理工大学,香港中文大学(深圳)以及微软亚研院联合提出一种以骨架(meso ...
- 微信小程序开发实战基础一、页面跳转，底部导航栏，分享，加载图片标签，列表
1.页面跳转 wx.navigateTo({ url: "../four/four" })--可返回 wx.redirectTo({ url: "../four/four ...
- CVPR 2022 | 看谷歌的单张图片人体重建效果如何？
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 来源丨人脸人体重建 本文作者均来自 Google Research,作者提出了一个新颖的端到端的深度神 ...
- Bootstrap框架----单张图片上传实现---Uploadify插件
框架搭建 我们在之前的文章中已经实现了 单张图片的上传,使用的是最基本的 File类型的input提交的方式,上传到远程静态资源器和七牛云. 之前的文章关注的地方 主要是后端,也就是图片上传保存到哪里 ...
最新文章
- Bad owner or permissions on xx/.ssh/config
- 二本毕业后3年发两篇Nature引热议，他此前研究刷新世界纪录
- gridview 导出到excel,repeater类似
- 学习python之序言
- boost::mpl模块实现find相关的测试程序
- 我所理解的设计模式（C++实现）——策略模式（Strategy Pattern）
- OC之非ARC环境下循环retain问题
- Unexpected exception 'Cannot run program '的解决
- 管道符和作业控制 shell变量 环境变量配置文件
- Web方式预览Office/Word/Excel/pdf文件解决方案
- 自学python能干什么-学习python可以做什么
- 企业微信集成外部APP
- SOP是Standard Operation Procedure三个单词中首字母的大写 ，即标准作业程序
- python - 啃书 第八章 正则表达式
- 一篇让你熟练掌握Google Guava包(全网最全)
- [思语]_我心中的大师
- 地理加权回归 | 模型如何应用于新数据的预测？
- 【论文阅读】Multi-hop Question Answering via Reasoning Chains
- SDNU 1543.Happy Salted Fish Every Day
- STM32+IAP方案的实现，IAP实现原理（详细解决说明）。