jquery 图片裁剪 java,jQuery实现图片上传和裁剪插件Croppie
这篇文章主要介绍了jQuery实现图片上传和裁剪插件Croppie,实现最常见的各用户系统要求用户上传和裁剪头像的应用,感兴趣的小伙伴们可以参考一下
在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie。
运行效果图:
HTML
首先我们将相关js和css文件载入head中。
接下来我们在页面上放置一个图片上传按钮,我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后,在#upload-demo展示上传图片,以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。
上传
裁剪
CSS
使用以下CSS代码,我们很完美的将选择文件的控件转成按钮的样式,其实就是将type="file"透明度设成0,然后和button重叠。此外,我们先将图片裁剪区域.crop设置为不可见,等选择文件后再显示。
button,
a.btn {
background-color: #189094;
color: white;
padding: 10px 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.5);
font-size: 16px;
cursor: pointer;
text-decoration: none;
text-shadow: none;
}
button:focus {
outline: 0;
}
.file-btn {
position: relative;
}
.file-btn input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.actions {
padding: 5px 0;
}
.actions button {
margin-right: 5px;
}
.crop{display:none}
jQuery
首先利用HTML5的FileReader API读取本地文件,然后$('#upload-demo').croppie()调用了Croppie插件。Croppie的选项viewport:可以设置所裁剪图片的宽度和高度,以及类型(圆形或方形);选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom:是否支持鼠标滚轮缩放图像;showZoom:是否展示缩放条工具;update:回调函数。
$(function(){
var $uploadCrop;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
});
}
reader.readAsDataURL(input.files[0]);
}
else {
alert("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
$(".crop").show();
readFile(this);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', 'canvas').then(function (resp) {
popupResult({
src: resp
});
});
});
function popupResult(result) {
var html;
if (result.html) {
html = result.html;
}
if (result.src) {
html = '';
}
$("#result").html(html);
}
});
当点击“裁剪”按钮后,再次调用Croppie的result的方法,返回一张裁剪后的图片,并显示在#result中。
以上就是jQuery实现图片上传和裁剪的主要过程,希望对大家学习图片上传和裁剪技术有所帮助。
jquery 图片裁剪 java,jQuery实现图片上传和裁剪插件Croppie相关推荐
- php 图片上载 wordpress,WordPress 使用 Jcorp上传并裁剪图片作为自定义头像 —— PHP 后台部分...
在开发 WordPress 用户中心的时候,我们需要让用户在前段上传自定义图片作为头像,因为很多用户都是小白,上传头像之前要求他们按照尺寸裁剪好是不大现实的.为了提升用户体验,我研究测试了很久,终于搞 ...
- uni-app实现图片的上传和裁剪
uni-app实现图片的上传和裁剪 uni-app 实现图片的上传和裁剪,插件市场上已经有作者提供了相关的插件.这里主要介绍下我在自己开发图片上传和裁剪过程中遇到的一些问题. 图片上传 图片上传功能比 ...
- 1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端 先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片 对图片的裁剪以及调整(旋转.缩放 ...
- vue+element实现图片上传及裁剪功能(vue-cropper)
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
- jquery.form 和MVC4做无刷新上传DEMO
jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...
- bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片
http://plugins.krajee.com/file-plugin-methods-demo 具体操作 http://plugins.krajee.com/file-preview-manag ...
- html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片 之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
- jquery.form.js java_使用jQuery.form.js/springmvc框架实现文件上传功能
使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jque ...
- php 图片无法删除,php如何删除上传的图片
php删除上传的图片的方法:首先检查上传文件是否在允许上传的类型:然后获取图片的完整路径:最后通过"unlink("uppic/".$img);"方法删除图片即 ...
- java实现多文件上传至本地服务器
转载自 java实现多文件上传至本地服务器 博主最近在做一个内网项目,内部可以访问外部数据,但是外部访问不了内部数据,这也就造成了可能文件无法上传,所以博主另辟蹊径,在本地服务器上建立一个文件夹专门 ...
最新文章
- GitHub开源项目!一款功能强大的特征选择工具
- **Git本地仓库图解
- Ubuntu被曝严重漏洞:切换系统语言+输入几行命令,就能获取root权限
- arcgis python编程案例-面向ArcGIS的Python脚本编程
- Java编程入门100例之二十二(字符串查找)
- PlateSpin 完全复制由于LVM没有可用空闲空间导致失败
- 工作空间出错_实践 | WMS系统,对于仓库工作效率和成本管控的意义
- Javafx的WebEngine的url加载不输出结果坑,gc回收了局部变量
- 移动端touch模块
- 电商有可能决定一个工厂的生死存亡
- 软件研发设计经验总结
- 如何自制会跳舞的AI小姐姐?这有一份易上手的开源攻略
- ECS Linux 服务器解除ssh登陆后被锁定或暂停输入输出的终端
- 【论文解读】知识图谱最新研究综述
- zabbix mysql模板_[原创]通过zabbix 使用改良自带模板Template App MySQL监控服务器上的mysql...
- 新基建 X 巡检机器人:AI赋能,从“前锋”到“统帅”
- 阿里云ECS搭建在线IDE
- 发票自动处理识别和分类
- 【递推】种萝卜 C++题解
- 2011夏天的那点事儿 ~~乌镇雷峰塔普陀山千
热门文章
- STM32内部Flash使用磨损均衡算法(Erase Leveling)
- Windows程式开发设计指南--视窗和讯息
- 浅谈Innodb存储结构(Buffer Pool、Double Write Buffer、Change Buffer、Redo log、Undo Log、自适应索引.......)
- 高效能人士的七个习惯的简要定义与架构图
- 2019 CSP-S第二轮认证一等奖获奖名单
- 计算机重做系统 d盘,重装系统后c盘变成d盘怎么办|pe装系统c盘变d盘解决方法
- cuda必须装在c盘吗_怎样把C盘的所有文件移到D盘或E盘里去?
- Word中生成英文目录
- 今晚8:00 | 杜克大学计算进化智能中心(CEI Lab)—— 高效鲁棒深度学习专题!...
- 智慧养殖系统方案云平台功能