cropper封装的头像裁剪尺寸插件
其他特效 次 2019-06-20Cropper是一款功能强大的头像裁剪尺寸插件，通过简洁的封装，实现了高效的图片裁剪处理。除了基本的裁剪功能，还提供了多种特效，让图片处理更加灵活多变。只需简单集成，即可轻松实现个性化头像裁剪需求。
cropper.js封装的图片裁剪插件。支持移动图像，裁剪图片，放大缩小图片，上下左右移动，图片翻转等重置设置功能。这是一款基于jQuery的头像尺寸设置裁剪组件。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<link rel="stylesheet" href="css/cropper.css" rel="stylesheet" />
2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/cropper.js"></script>
3、body引入部分
<button id="guyuan" style="margin:50px;">裁剪图片</button>
<script type="text/javascript">
var img = 'img/tp.png'
$('#guyuan').click(function () {
Model_Cropper({
imgUrl: img, // 图片地址 / 或者 base64 注：图片地址(需要在服务器环境下 base64不需要)
proportion: [100, 100], // 宽/高 裁剪and压缩比例 单位px 图片等比例压缩至 200px/200px
confirm: function (result) { // 裁剪成功后 返回的 事件
// 调用 result.close() 关闭弹框
// result.data 为对象 base64 = 处理后base64码 blob = 图片对象
console.log(result)
console.log('blob对象=======',result.data.blob)
console.log('base64=======',result.data.base64)
alert('打开控制台查看 裁剪压缩返回数据')
},
})
})
//
$(function(){
$('#guyuan').click()
})
</script>
文件目录
本资源来自：代码 » 其他特效 » cropper封装的头像裁剪尺寸插件
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
爱情纪念多少天数表白代码
« 上一篇
2019年06月28日
仿微信自定义菜单编辑器
下一篇 »
2019年06月24日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
