位置: 编程技术 - 正文
jQuery实现图片上传和裁剪插件Croppie(jquery添加图片)
编辑：rootadmin推荐整理分享jQuery实现图片上传和裁剪插件Croppie(jquery添加图片)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery图片上传,jquery图片上传,jquery 图片插件,jquery 图片插件,jquery添加图片,jquery 图片插件,jquery实现图片上传,jquery添加图片,内容如对您有帮助，希望把文章链接给更多的朋友！
在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件，它叫Croppie。
运行效果图：
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设置自定义属性)
