小程序canvas截图组件

最新推荐文章于 2024-03-21 23:04:02 发布
最新推荐文章于 2024-03-21 23:04:02 发布
阅读量809 收藏
点赞数
分类专栏： 前端 文章标签： 小程序 canvas截图 组件
原文链接：https://www.mk2048.com/blog/blog.php?id=hb000kb2bbab&title=%E5%B0%8F%E7%A8%8B%E5%BA%8Fcanvas%E6%88%AA%E5%9B%BE%E7%BB%84%E4%BB%B6
版权

最近做一个小程序的过程中，需要用到截图功能，网上搜了一下，发现没有符合要求的，就自己搞了个组件，方便复用。

目前功能很简单，传入宽高和图片路径即可，宽高是为了计算截图的比例，只支持缩放和移动。

实现思路是：

1.模拟一个截取框；2.移动图片位置，缩放图片；3.获取图片在其中的位置(left，top，width，height)；4.使用canvas绘制图片，然后截取就ok了。

其中第二步的缩放图片比较麻烦，缩放中心点以及平滑缩放

以下是我的实现方式

wxml：

<!--component/picPro/picPro.wxml-->
<scroll-view class='body' hidden="{{hidden}}">
<view class='flex-column flex-between full-height full-width' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
<view class='bg_dark out_item'></view>


<view class='flex-row main flex-between' style='height:{{(windowWidth - margin.left - margin.right)/ratio   "px"}}'>
<view class='bg_dark main_item full-height' style='width:{{margin.left    "px"}}'></view>

<view class='inner relative full-width' id='showArea'>
<image class='absolute img' src='{{src}}' style="width:{{img.width}}px;height:{{img.height}}px;left:{{img.left}}px;top:{{img.top}}px;"></image>
<canvas canvas-id='imgCanvas' class='absolute img_canvas full-height full-width' />
<view class='absolute inner_item left_top'></view>
<view class='absolute inner_item right_top'></view>
<view class='absolute inner_item right_bottom'></view>
<view class='absolute inner_item left_bottom'></view>
</view>

<view class='bg_dark main_item full-height' style='width:{{margin.right   "px"}}'></view>
</view>


<view class='bg_dark out_item flex-column flex-end'>
 <view class='flex-around text_white text_bg'>
<view catchtap='outputImg' data-type='1'><text>重新上传</text></view>
<view catchtap='getImg'><text>选择图片</text></view>
</view> 
</view>
<!--  -->
<view class='absolute full-width full-height bg_black'></view>
</view>
</scroll-view>
View Code

wxss:(其中引入了一个公共样式，关于flex布局的，看样式名也能猜到)

/* component/picPro/picPro.wxss */
@import '../../resource/style/flex.wxss';
.body{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.text_white{
  color: white;
}
.main{
}
.out_item{
  width: 100%;
  height: 100%;
  flex: 1;
}
.bg_dark{
  background-color: rgba(0, 0, 0, 0.85)
}
.main_item{
  width: 15px;
}
.inner{
  outline: 3rpx solid white;
  background-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset;
}
.inner_item{
  width: 8px;
  height: 8px;
}
.inner_item.left_top{
  border-left: 3px solid white;
  border-top: 3px solid white;
  left: -3px;
  top: -3px;
}
.inner_item.right_top{
  border-right: 3px solid white;
  border-top: 3px solid white;
  right: -3px;
  top: -3px;
}
.inner_item.right_bottom{
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  right: -3px;
  bottom: -3px;
}
.inner_item.left_bottom{
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  left: -3px;
  bottom: -3px;
}
.img{
  z-index: -1;
}
.bg_black{
  background-color:black;
  z-index: -2; 
}
.text_bg{
  padding-bottom: 2em;
  font-size: 0.9em;
}
  
.img_canvas{
  opacity: 0.5;
}
.newImg{
  z-index: 2
}
View Code

js：

  1 // component/picPro/picPro.js
  2 const state = {
  3   // 可用区域body
  4   window: { width: 0, height: 0 },
  5   // 原始图片信息
  6   originImg: { width: 0, height: 0 },
  7   // 第一次图片缩放信息
  8   firstScaleImg: { width: 0, height: 0 },
  9   // 截取区域信息
 10   interArea: { width: 0, height: 0 },
 11   // 单手触摸位置
 12   touchLast: { x: 0, y: 0 },
 13   // 滑动距离
 14   touchMove: { x: 0, y: 0 },
 15   // 滑动离开时图片状态
 16   moveImgState: {
 17     width: 0,
 18     height: 0,
 19     top: 0,
 20     left: 0,
 21   },
 22   // 双手触摸位置
 23   touchList: [{ x: 0, y: 0 }, { x: 0, y: 0 }],
 24   // 图片缩放比例
 25   scale: 1,
 26 }
 27 Component({
 28   /**
 29    * 组件的属性列表
 30    */
 31   properties: {
 32     //宽（非实际值）
 33     width: {
 34       type: Number,
 35       value: 600
 36     },
 37     //高
 38     height: {
 39       type: Number,
 40       value: 300
 41     },
 42     //图片路径
 43     src: {
 44       type: String,
 45       value: ""
 46     },
 47     //显示隐藏
 48     hidden: {
 49       type: Boolean,
 50       value: false
 51     },
 52     //截取框的信息
 53     margin: {
 54       type: Object,
 55       value: {
 56         left: 15,
 57         right: 15,
 58         top: 200,
 59         bottom: 200,
 60       }
 61     }
 62   },
 63 
 64   ready() {
 65     this.initialize();
 66     // const canvas = wx.createCanvasContext('imgCanvas', this);
 67     // canvas.draw(false, () => { console.log('ccc') }, this);
 68   },
 69 
 70   /**
 71    * 组件的初始数据
 72    */
 73   data: {
 74     touchRange: 8,
 75     img: {
 76       width: 0,
 77       height: 0,
 78       top: 0,
 79       left: 0,
 80     },
 81     canvas: {},
 82     ratio: 0,
 83     originImg: {
 84       width: 0,
 85       height: 0
 86     }
 87   },
 88 
 89   /**
 90    * 组件的方法列表
 91    */
 92   methods: {
 93     touchstart(e) {
 94       // console.log("touchstart", e);
 95 
 96     },
 97     touchmove(e) {
 98       if (e.touches.length === 1) { this.singleSlip(e.touches[0]) } else {
 99         this.doubleSlip(e.touches)
100       }
101     },
102     touchend(e) {
103       // console.log("touchend", e);
104       const x = 0, y = 0;
105       state.touchLast = { x, y };
106       state.touchMove = { x, y };
107       state.touchList = [{ x, y }, { x, y }];
108       state.moveImgState = this.data.img;
109       // console.log(this.data.img);
110     },
111     // 单手滑动操作
112     singleSlip(e) {
113       const { clientX: x, clientY: y } = e;
114       const that = this;
115       if (state.touchLast.x && state.touchLast.y) {
116         state.touchMove = { x: x - state.touchLast.x, y: y - state.touchLast.y };
117         state.touchLast = { x, y };
118         const move = (_x = false, _y = false) => {
119           const bottom = that.data.img.height   that.data.img.top;
120           const right = that.data.img.width   that.data.img.left;
121           const h = state.interArea.height;
122           const w = state.interArea.width;
123           const param = {};
124           if (_x) {
125             if (right > w && that.data.img.left < 0) {
126               param.left = that.data.img.left   state.touchMove.x * 0.1
127             } else if (right <= w && state.touchMove.x > 0) {
128               param.left = that.data.img.left   state.touchMove.x * 0.1
129             } else if (that.data.img.left >= 0 && state.touchMove.x < 0) {
130               param.left = that.data.img.left   state.touchMove.x * 0.1
131             }
132           };
133           if (_y) {
134             if (bottom > h && that.data.img.top < 0) {
135               param.top = that.data.img.top   state.touchMove.y * 0.1
136             } else if (bottom <= h && state.touchMove.y > 0) {
137               param.top = that.data.img.top   state.touchMove.y * 0.1
138             } else if (that.data.img.top >= 0 && state.touchMove.y < 0) {
139               param.top = that.data.img.top   state.touchMove.y * 0.1
140             }
141           };
142           // console.log(param);
143           that.setImgPos(param)
144         };
145         if (state.scale == 1) {
146           if (that.data.img.width == state.interArea.width) {
147             move(false, true)
148           } else {
149             move(true, false)
150           }
151         } else {
152           move(true, true)
153         }
154       } else {
155         state.touchLast = { x, y }
156       }
157     },
158     // 双手缩放操作
159     doubleSlip(e) {
160       const that = this;
161       const { clientX: x0, clientY: y0 } = e[0];
162       const { clientX: x1, clientY: y1 } = e[1];
163       if (state.touchList[0].x && state.touchList[0].y) {
164         let changeScale = (Math.sqrt((x1 - x0) * (x1 - x0)   (y1 - y0) * (y1 - y0)) - Math.sqrt((state.touchList[1].x - state.touchList[0].x) * (state.touchList[1].x - state.touchList[0].x)   (state.touchList[1].y - state.touchList[0].y) * (state.touchList[1].y - state.touchList[0].y))) * 0.0005;
165         changeScale = changeScale >= 1.5 ? 1.5 : (changeScale <= -1 ? -1 : changeScale);
166         state.scale = that.data.img.width / state.firstScaleImg.width < 1 ? 1 : (state.scale > 2.5 ? 2.5 : 1   changeScale);
167         let width = state.firstScaleImg.width * (state.scale - 1)   state.moveImgState.width;
168         width = width < state.firstScaleImg.width ? state.firstScaleImg.width : width;
169         let height = state.firstScaleImg.height * (state.scale - 1)   state.moveImgState.height;
170         height = height < state.firstScaleImg.height ? state.firstScaleImg.height : height;
171         let left = width * (1 - state.scale) / 4   state.moveImgState.left;
172         left = left * (-1) > width - state.interArea.width ? state.interArea.width - width: left > 0 ? 0 : left;
173         let top = height * (1 - state.scale) / 4   state.moveImgState.top;
174         top = top * (-1) > height - state.interArea.height ?state.interArea.height - height  : top > 0 ? 0 : top;
175         const setImgObj = { width, height, left, top };
176         that.setImgPos(setImgObj)
177       } else {
178         state.touchList = [{ x: x0, y: y0 }, { x: x1, y: y1 }]
179       }
180     },
181     // 获取可用区域宽高
182     getScreenInfo() {
183       const that = this;
184       return new Promise((resolve, reject) => {
185         wx.getSystemInfo({
186           success: function (res) {
187             const { windowHeight, windowWidth } = res;
188             state.window = { windowHeight, windowWidth };
189             that.setData({ windowHeight, windowWidth })
190             // console.log(state.window);
191             resolve(res);
192           },
193         })
194       })
195     },
196     setShowArea() {
197       const that = this;
198       const w = state.window.windowWidth - that.data.margin.left - that.data.margin.right;
199       const h = (that.data.height / that.data.width) * w;
200     },
201     outputImg() {
202       this.setData({
203         hidden: true,
204       })
205     },
206     getImgInfo(path) {
207       return new Promise((resolve, reject) => {
208         wx.getImageInfo({
209           src: path,
210           success(res) {
211             console.log(res);
212             resolve(res);
213           },
214           fail(err) {
215             reject(err)
216           }
217         })
218       })
219     },
220     // 设置图片
221     setImgPos({ width, height, top, left }) {
222       width = width || this.data.img.width;
223       height = height || this.data.img.height;
224       top = top || this.data.img.top;
225       left = left || this.data.img.left
226       this.setData({
227         img: { width, height, top, left }
228       })
229     },
230     // 初始化图片位置大小
231     initialize() {
232       const that = this;
233       const ratio = that.data.width / that.data.height;
234       this.getScreenInfo().then(res => {
235         console.log(res);
236         state.interArea = { width: res.windowWidth - that.data.margin.left - that.data.margin.right   2, height: (res.windowWidth - that.data.margin.left - that.data.margin.right) / ratio };
237         console.log("interArea", state.interArea)
238         that.getImgInfo(that.data.src).then(imgInfo => {
239           const { width, height } = imgInfo;
240           const imgRatio = width / height;
241           state.originImg = { width, height };
242           that.setData({
243             ratio: ratio
244           });
245           if (imgRatio > ratio) {
246             that.setImgPos({
247               height: state.interArea.height,
248               width: state.interArea.height * imgRatio
249             })
250           } else {
251             that.setImgPos({
252               height: state.interArea.width / imgRatio,
253               width: state.interArea.width,
254             })
255           };
256           state.firstScaleImg = { width: that.data.img.width, height: that.data.img.height }
257         });
258       });
259     },
260     // 截图
261     getImg(){
262       const that = this;
263       // console.log('dudu', that.data.img);
264       const canvas = wx.createCanvasContext('imgCanvas', this);
265       const {width,height,left,top} = that.data.img;
266       const saveImg = ()=>{
267         console.log('开始截取图片');
268         wx.canvasToTempFilePath({
269           canvasId:"imgCanvas",
270           success(res){
271             // console.log(res);
272             that.setData({
273               hidden:true,
274               // src:""
275             });
276             that.triggerEvent("putimg", { imgUrl: res.tempFilePath},{});
277           },
278           fail(err){
279             console.log(err)
280           }
281         },that)
282       };
283       canvas.drawImage(that.data.src, left, top, width, height);
284       canvas.draw(false, () => { saveImg() }, that)
285     }
286   }
287 })
View Code

引用的时候除了宽高路径以外，需要wx:if；如果不卸载组件，会出现只能截一次的bug

因为小程序里面没有类似vue中catch的观测数据变化的东西，也不想为了个组件专门去搞一个，就用这种方式代替了，嘻嘻，好敷衍。。

 

 

 

<------------------------以前做的，现在发一下源码，不要吐槽--------------------------->

 

链接：https://pan.baidu.com/s/1MnTVhdGDmtFLTJdO5m024w
提取码：7yun 

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
我爱丁丁猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序canvas拖拽、截图组件功能
01-03
先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-… readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放、旋转、删除元素 看起来挺简单的嘛，就把上面这几个问题解决了，就可以实现功能了；接下来我们一一解决。 如何将多个元素渲染到canvas上 定义一个DragGraph类，传入元
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
微信小程序实现一键长图并保存图片到相册
guairena的博客
04-19 7644
效果： 类似骨朵的一键长图骨朵剧集排行榜 通过点击按钮实现长截图，并可以滚动，长按保存或者转发。 思路： 参考骨朵数据，使用的是html2canvas，骨朵的小程序是个空壳，所有的页面都是H5写的，是一整个H5项目通过<web-view src="{{realUrl}}"></web-view>嵌入到小程序中，一键长图通过用html2canvas插件生成长图。 原生小程序是无法使用html2canvas插件的。 微信小程序提供了webview组件以承载web页面。有了这个组件就可
小程序踩坑记录(canvas实现页面截图、下载文件)(持续更新)
最新发布
m0_57541068的博客
03-21 551
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
微信小程序截屏保存图片
热门推荐
weixin_43656393的博客
09-23 2万+
在小程序的分享功能中，截屏是一个比较常见的需求。而截屏不只是截取当前页面，还要将二维码放进去以方便用户长按识别。从营销方面来看，这样可以说是一举两得了。要实现的效果如下： 实话说，一开始收到这个需求是懵b的，完全没有任何思路。试过用a标签的download属性，但是只能在电脑端才能下载…一路坎坎坷坷，四处碰壁，虐得我体无完肤…后来终于在慢慢摸索中发现了生的希望。 1 背景 需要截屏的页面是...
微信小程序拍照截图，本地上传截图
weixin_44936767的博客
04-04 1324
【代码】微信小程序拍照截图，本地上传截图。
用canvas绘制微信小程序海报页面并保存相册-适用微信原生
qq_43205326的博客
01-28 5583
微信小程序如何绘制全屏海报，并保存到相册
微信小程序 分享图片使用canvas裁剪按比例生成
半梅芒果干的博客
01-15 1178
wxml： <canvas type="2d" id="canvas"></canvas> js： wx.getImageInfo({ src: ’‘, // 这里填写网络图片路径 success: (res) => { this.clipImage(res.width, res.height) } }) // 裁剪图片 clipImage(imgW, imgH) { new Promise((resolve, reject) => {
小程序 超长页面截图保存web-view+html2canvas
Start2019
01-05 5352
使用web-view+html2Canvas，截图长图，并保存图片到手机的过程
小程序使用wxml-to-canvas截屏
培根芝士的专栏
06-21 3013
安装wxml-to-canvas 1、在小程序项目根目录内，初始化npm npm init -y 2、执行命令安装wxml-to-canvas的npm包 npm install --save wxml-to-canvas 3、在微信开发者工具中的菜单栏：工具 --> 构建 npm 完成构建后可以在目录树里看到了miniprogram_npm以及里面的wxml-to-canvas组件文件夹 4、在微信开发者工具中的菜单栏：工具 --> 项目详情，勾选“使用npm模块”
小程序使用canvas2d进行截图(图片+列表)
qq_42975998的博客
07-08 2102
使用canvas进行截图，就是在canvas画布上把想要的东西画一遍然后保存成图片。 如果是线上图片要使用wx.getImageInfo进行转换再显示在canvas上 wxml: <view class="canvas-box" > <canvas type="2d" id="canvas" style='width:100%; height:{{canvasHeight}}px' ></canvas> </view> <view&g
微信小程序-生成canvas图片并保存到手机相册
weixin_42484910的博客
09-02 1695
【代码】微信小程序-生成canvas图片并保存到手机相册。
微信小程序-微信小程序Canvas增强组件
08-07
WeZRender：微信小程序Canvas增强组件 WeZRender是一个微信小程序Canvas增强组件，基于HTML5 Canvas类库ZRender。 使用 WXML： JS： var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender...
微信小程序canvas实现刮刮乐效果
01-03
本文实例为大家分享了微信小程序实现刮刮乐效果的具体代码，供大家参考，具体内容如下 效果图 设计流程 设计思路 canvas设置背景图，作为中奖图片； 在canvas上绘制刮的灰色涂层； 通过绑定的事件，清除对应...
Wx-小程序使用canvas截图保存
weixin_30509393的博客
07-17 1069
1、 wxml 页面 使用画布来站位，并给按钮添加绑定事件 <button class='btn btn-theme' bindtap='setSaveImage'>保存图片到本地</button> <!-- 使用画布站位--> <canvas hidden="{{canvasHidden}}" canvas-id='imageCanvas...
微信小程序—canvas截取任意形状
WeiHan_Seven的博客
01-11 1706
最近在研究拼图验证码实现，需要对图片的部分模块进行特殊形状切割出一小块，明白后原来是如此简单，第一步就是将所有绘制的形状用线勾出（直线、弧线、贝塞尔曲线都可以）形成闭环，第二步就是切割绘制，第二步不麻烦，麻烦的只是第一步，需要一些计算，所以会在以后，尽力的多保存一些特殊形状的方法。
小程序 uniapp中webview内嵌H5页面 html2canvas截图 base64的图片保存到手机相册
M__O__M的博客
09-22 5736
H5页面通过html2canvas进行截图，将截图的数据通过wx.miniProgram.navigateTo的地址传值到小程序页面；最后在小程序base64转码保存手机相册。
微信小程序拍照截取取景框内容#canvas
zhazhashuai1999的博客
09-09 2444
最近有个需求是拍照识别Vin码,为了识别准确度,要求前端只上传取景框内的内容给后端识别. 通过一天多的碰壁(微信开发者工具,懂的都懂),终于在各种论坛的各种不起眼的地方摸出了一套可以正常使用的流程. 总流程如下: 使用<carema>组件唤起相机 点击拍照按钮拍照,使用 CameraContext.takePhoto(Object object)函数拍照,并在success回调中保存图片地址res.tempImagePath 获取canvas实例,传给自定义函数init()
小程序canvas组件怎么用
05-10
小程序中的 `canvas` 组件可以用来绘制图形、动画等，下面是一个简单的使用方法： 1. 在 `wxml` 文件中添加 `canvas` 组件： ```html <canvas canvas-id="myCanvas"></canvas> ``` 2. 在 `js` 文件中获取 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值