位置: 编程技术 - 正文

jQuery实现图片上传和裁剪插件Croppie(jquery添加图片)

编辑:rootadmin

推荐整理分享jQuery实现图片上传和裁剪插件Croppie(jquery添加图片),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery图片上传,jquery图片上传,jquery 图片插件,jquery 图片插件,jquery添加图片,jquery 图片插件,jquery实现图片上传,jquery添加图片,内容如对您有帮助,希望把文章链接给更多的朋友!

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie。

运行效果图:

jQuery实现图片上传和裁剪插件Croppie(jquery添加图片)

HTML首先我们将相关js和css文件载入head中。

接下来我们在页面上放置一个图片上传按钮,我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后,在#upload-demo展示上传图片,以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。

CSS使用以下CSS代码,我们很完美的将选择文件的控件转成按钮的样式,其实就是将type="file"透明度设成0,然后和button重叠。此外,我们先将图片裁剪区域.crop设置为不可见,等选择文件后再显示。

jQuery首先利用HTML5的FileReader API读取本地文件,然后$('#upload-demo').croppie()调用了Croppie插件。Croppie的选项viewport:可以设置所裁剪图片的宽度和高度,以及类型(圆形或方形);选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom:是否支持鼠标滚轮缩放图像;showZoom:是否展示缩放条工具;update:回调函数。

当点击“裁剪”按钮后,再次调用Croppie的result的方法,返回一张裁剪后的图片,并显示在#result中。

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

标签: jquery添加图片

本文链接地址:https://www.jiuchutong.com/biancheng/373855.html 转载请保留说明!

上一篇:jQuery如何使用自动触发事件trigger(jquery设置自定义属性)

下一篇:MVC Ajax Helper或Jquery异步加载部分视图

  • 企业所得税视同销售的会计处理是?
  • 进口货物复合计税的应税消费品包括
  • 已发货没开票分录
  • 培训机构财务怎么做账
  • 原值和净值在报表怎么找
  • 生产工人工资和福利费是产品成本项目对吗
  • 会计核算是否健全 填错了有影响吗
  • 报税软件费用可以退吗
  • 钱已付票未收到分录怎么做
  • 直接进费用的固定资产
  • 销售使用过的固定资产如何开票
  • 什么情况下可要求厂商出品质保证书
  • 投资款转为借款需要哪些证据
  • 车辆报废补贴多久到账
  • 收到预付账款的分录
  • 建筑业暂估成本表
  • 车间领用低值易耗品记账凭证
  • 营改增后11
  • 继承房产也需要缴税吗
  • 小规模开票后的分录怎么做
  • 发票联丢失怎么做账
  • 车位租赁费和房屋租赁能开一张发票吗
  • 生产企业结账流程
  • 外汇账户转账有手续费吗
  • PHP:pg_version()的用法_PostgreSQL函数
  • 蜡梅的养殖方法视频
  • php extract函数
  • 下列可以作为企业使命
  • 石楠花 开花
  • 老板垫付的货款会计分录
  • php缓存文件并自动清理
  • php自定义header
  • 经营性应收项目的计算公式
  • 高温补贴入账科目
  • 会计等式反映了六大会计要素的恒等关系
  • 基于车联网
  • 人工智能机器人的好处
  • 季节性停工计入当期损益吗
  • mongodb快速入门
  • 工资计提啥意思
  • 职工薪酬属于收益性支出
  • 计提固定资产折旧借方科目包括
  • 职工薪酬包括哪几类
  • 公司股东退股如何对资产纳税
  • 增值税发票日用品开票明细
  • 主要业务活动是什么意思
  • 企业收入总额是营业额吗
  • 商家说垫付运费
  • 公司名义看望病人慰问金用什么包
  • 顺流交易为什么不考虑出售比例
  • 附加税的计税依据是增值税实际缴纳税款吗
  • 电子承兑汇票是24小时签收吗
  • 长期待摊费用处置
  • 住房租金专项附加扣除金额
  • 长期应付职工薪酬属于其他非流动负债吗
  • mysql57安装过程怎样选安装目录
  • windows下安装nas
  • win8链接wi-fi
  • win10预览版选哪个
  • windows vista界面
  • 默认终端地址
  • win8系统安装教程图解
  • android基础入门
  • 易信安卓手机版
  • css布局的经典网站
  • final exam是什么意思
  • shell获取脚本进程id号
  • javascript怎么弄
  • androidstudio安装gradle不成功
  • excel执行python脚本
  • css图片渐变效果
  • 企业如何在网上申请缴税三方协议
  • 河北电子税务局手机app
  • 个体户注销税盘需要公章吗
  • 注销外经证需要身份证吗
  • 建筑企业外地施工预缴税款
  • 劳动仲裁受理通知
  • 电子客票号码8768是什么
  • 小区配电房移交供电局的依据
  • 出口之后必须办什么手续
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设