最近做项目的时候,需要做一个截图功能。用了一个别人写的截图工具,发现截出的图质量下降了,但是我们图片要用来做识别, 需要保证截出的图质量不下降。而且也不支持通过拖动来调整截图框的大小。所以这个截图工具无法满足需求。因为所以,就自己动手写了一个截图组件。 下面介绍一下实现原理和使用方法。 实现原理组件wxml的层次结构图如下:
最后截图,通过四个点的位置计算出截图框的位置,然后放大对应原图大小的位置,得到在原图中的(x, y, width, height),最后通过官方提供的canvas接口截图。
最后截图,通过四个点的位置计算出截图框的位置,然后放大对应原图大小的位置,得到在原图中的(x, y, width, height),最后通过官方提供的canvas接口截图。 特点
使用假设我们的应用文件结构如下:
调用组件时,需要传入cropperData和cropperMovableItems,因为数据和事件都是绑定在Page上的,所以要避免使用组件里面已经被占用的命名。 /pages/index/index.wxml
/pages/index/index.js
最后引入组件的样式 /pages/index/index.wxss
效果图
截图
如果将movable-view显示出来是这样的:源代码: Github:tomfriwel/welCropper,将welCropper文件夹复制到自己项目,引入调用就行了。 如果出现什么bug、问题或者建议可以告诉我,我会尽量改进。 |
截图组件welCropper,实现原理及其使用
发布:2018-04-25 08:50浏览: 次来源:网络 作者: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