微信小程序 图片裁剪
时间:2019-11-06
本文章向大家介绍微信小程序 图片裁剪,主要包括微信小程序 图片裁剪使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
微信小程序 图片裁剪
分享一个微信小程序图片裁剪插件,很好用,支持旋转
文档:https://github.com/wyh19931106/image-cropper
1.json文件中添加image-cropper
"usingComponents": { "image-cropper": "../plugin/image-cropper" }
2.wxml文件
<image-cropper id="image-cropper" limit_move="true" disable_rotate="true" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>
3.wxss文件末尾
@import '../plugin/image-cropper.wxss'
4.示例
Page({ data: { src:'', width:250,//宽度 height: 250,//高度 }, onLoad: function (options) { this.cropper = this.selectComponent("#image-cropper"); this.setData({ src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg", }); wx.showLoading({ title: '加载中' }) }, cropperload(e){ console.log("cropper初始化完成"); }, loadimage(e){ console.log("图片加载完成",e.detail); wx.hideLoading(); //重置图片角度、缩放、位置 this.cropper.imgReset(); }, clickcut(e) { console.log(e.detail); //点击裁剪框阅览图片 wx.previewImage({ current: e.detail.url, // 当前显示图片的http链接 urls: [e.detail.url] // 需要预览的图片http链接列表 }) } })
原文地址:https://www.cnblogs.com/wangyihong/p/11806252.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PyQt5 技术篇-设置输入框的placeholder方法,Qt Designer设置Line Edit、Text Edit编辑框的placeholder
- Kafka集群搭建及必知必会
- Python 技术篇-打开指定文件夹、目录、路径方法,运行指定文件演示
- Python 技巧篇-同一个方法多次引用不同效果功能实现,可选参数设置方法
- Kafka核心API——Connect API
- PyQt5 技术篇-设置alignment对齐方式。Qt Designer设置文本对齐方式。居中、左对齐、右对齐、上对齐、下对齐。
- Nginx部署Vue项目以及解决刷新页面404
- Kafka核心API——Stream API
- Kafka核心API——Consumer消费者
- Kafka核心API——Producer生产者
- Linux Lab v0.5 正式发布,功能强大,用法简单
- Kafka核心API——AdminClient API
- PyQt5 技术篇-调用颜色对话框(QColorDialog)获取颜色,调色板的调用。
- Kafka的安装与配置
- PyQt5 技术篇-如何彻底删除控件?布局移除控件方法。