welCropper 微信小程序截图工具
./ ├── documents │ ├── hierarchy.png │ ├── result.gif │ └── screenshot.jpeg ├── project │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── pages │ │ ├── index │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ └── test │ │ ├── test.js │ │ ├── test.json │ │ ├── test.wxml │ │ └── test.wxss │ ├── utils │ │ └── util.js │ └── welCropper │ ├── welCropper.js │ ├── welCropper.wxml │ └── welCropper.wxss └── readme.md
因为cropper的数据和事件是直接绑定到Page上的,所以数据和事件命名应该避免一下名字(之后会想办法避免这种情况)及其相关解释: data中的名字:
函数名:
外部只用到showCropper和hideCropper
/**
inputPath:输入图片地址
callback(resPath):点击“完成”按钮后毁掉函数,毁掉函数中会有截图地址
*/
showCropper(inputPath, callback)使用
将welCropper复制到自己的工程当中(以/pages/index/index为例)wxml引入并调用:
<!-- 引入组件 -->
<import src="/welCropper/welCropper" />
<!-- 调用组件 -->
<template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems}}"></template>
<!-- 用于选择图片,传入cropper中 -->
<button bindtap='selectTap'>select image</button>
wxss引入:
@import "/welCropper/welCropper.wxss";
js引入和使用:
// 获取显示区域长宽 const device = wx.getSystemInfoSync() const W = device.windowWidth const H = device.windowHeight - 50 let cropper = require('../../welCropper/welCropper.js'); console.log(device) Page({ data: { }, onLoad: function () { var that = this // 初始化组件数据和绑定事件 cropper.init.apply(that, [W, H]); }, selectTap() { var that = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success(res) { const tempFilePath = res.tempFilePaths[0] console.log(tempFilePath) // 将选取图片传入cropper,并显示cropper that.showCropper({ src: tempFilePath, sizeType: ['original', 'compressed'], //'original' | 'compressed'(default) callback: (resPath) => { console.log("crop callback:" + resPath) wx.previewImage({ current: '', urls: [resPath] }) // that.hideCropper() //隐藏,我在项目里是点击完成就上传,所以如果回调是上传,那么隐藏掉就行了,不用previewImage } }) } }) } |
微信小程序截图工具
发布:2018-04-25 09:15浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08