微信小程序能生成图片分享吗？

11 Mar, 2022

updated: 2022-03-11

支持分享图片

小程序支持分享图片，参考接口文档https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.showShareImageMenu.html。但是，只支持从本地路径或临时路径分享，不支持分享网络地址的图片。

分享网络地址图片，可以先将图片下载，获取临时路径后，再分享，示例代码如下：

 wx.downloadFile({
   url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
   success: (res) => {
     wx.showShareImageMenu({
       path: res.tempFilePath
     })
   }
 })

有限支持分享截图

截图分享是有比较普遍的使用场景，但小程序没有比较好的支持方案。如果渲染的内容比较简单，可以通过canvas绘制，再将canvas转换为图片(参考接口链接，获取临时路径。再按前面方法分享图片。示例代码：

	// draw canvas
	const ctx = Taro.createCanvasContext('myCanvas')
	ctx.drawImage(
		image1Path,
		0, 0, 300, 300,
	)
	...
	ctx.draw()

	...
	
	// genrate image and share
	Taro.canvasToTempFilePath({
		canvasId: 'myCanvas',
		complete: (res) => {
			wx.showShareImageMenu({
				path: res.tempFilePath
			})
		},
	})

但是，对内容较多的界面，绘制对应的canvas，非常困难，不可行。

通常前端中，可以有dom-to-image/html2canvas等方式转换成图片，但微信小程序中限制较多，且存在一些微信特有的组件，暂未见到使用这两种方式成功案例。如有同仁成功实现，麻烦告知，万分感谢。

示例: 分享动态二维码

直接见代码:

	// convert text to qrcode in base64
	// `qrcode` from wx-mini-qrcode: https://github.com/flyingsouthwind/wx-mini-qrcode
	const qrcode0 = qrcode.outputQRCodeBase64(this.qrText, {
		size: 400,
		color: '#000000',
		padding: 16,
		background: '#ffffff'
	});

	// save base64 to tempPath
	const fs = Taro.getFileSystemManager()
	const filePath = `${Taro.env.USER_DATA_PATH}/share-image-tmp_${Date.now()}.png` 
	fs.writeFile({
		filePath: filePath,
		data: qrcode0.slice(22),
		encoding: 'base64',
		success: res => {
			const ctx = Taro.createCanvasContext('myCanvas')
			// qr content
			ctx.drawImage(
				filePath,
				0, 0, 300, 300,
			)
			// logo in center
			ctx.drawImage(
				LOGO_PATH,
				114, 114, 72, 72,
			)
			ctx.draw(false, () => {
				return Taro.showToast({title: '生成成功', icon: 'none'})
			})
		},
	})

	// then share image by canvas

#微信小程序