微信小程序-封装canvas实现自定义分享图片的组件

微信小程序-封装canvas实现自定义分享图片的组件

一、需求：

产品丢一图过来说，想要实现微信小程序类似的分享的功能，如下图：

如图可知：
1.需要有按钮；
2.支持单图和多图；
因为官方默认的分享：是截图当前页面并取5：4的图作为分享图分享出去的，也没有按钮，和产品想要的效果不一样。所以得自己实现。那开搞吧！

二、实现

实现思路：使用canvas将图和按钮画出来,并封装在组件里方便使用。

实现步骤：

1. 创建画布

   <canvas canvas-id="myCanvas" style="width: 195px;height: 156px;position:fixed;left:9000px;"></canvas>
   

   防坑点：
   a.画布的宽高比得是5：4；
   b.画布不能显示在界面上被用户看到，但是也不能隐藏。能想到的办法就是使用fixed定位，偏移到视线之外。即：position:fixed;left:9000px;(也有尝试其他方法，都不行)

2. 在画布上绘制所需元素

• 绘制拼图。对应drawImage()
  防坑点：
  a. 因为需要分享的图片是网络图片，不是本地图片。所以需要特别处理，也就是将网络图片先通过wx.getImageInfo进行处理。
  b.绘制图片最外层为带圆角的，而内部的6张图片不需是圆角，只需在拼图的尺寸上绘制圆角就行。对应drawImgRoundRect()。
  c.绘制完后，需要在draw回调里导出图，防止出现图片空白。即：

  that.canvasCtx.draw(true, () => {
        that.exportImage();});
  

  d.导出图片：绘制好的图片需要导出为本地文件供分享的方法调用的时候使用

  wx.canvasToTempFilePath
  

• 画按钮drawButton()
  防坑点：带填充色的按钮和按钮上的文字是分开绘制的。

  3.封装组件，并调用
  防坑点：
  a.由于我一开始并没有把以上的部分写在组件里，封装后，发现有些方法的调用有区别。比如获取canvas的contex的方法，需多加一个this的参数，即

   wx.createCanvasContext('myCanvas', this)
  

  a.封装组件后，为了在页面上能调用子组件的createImage()，需引入$refs，来调用子组件内的方法。

三、代码

主要代码如下：
1.组件代码：

<template>
	<view>
		<canvas canvas-id="myCanvas" style="width: 195px;height: 156px;position:fixed; left:9000px;"></canvas>
	</view>
</template>

<script>
	export default {
   
		name: "shareTo",
		data() {
   
			return {
   
				canvasWid: 195,
				canvasHei: 160,
				imgWid: 63.6,
				imgHei: 60,
				canvasCtx: '',
				finalImage: '',
			};
		},
		props: {
   
			shareImage: {
   
				type: Array,
				default: []
			},
			myCanvas: {
   
				type: String,
				default: null
			},
		},

		methods: