1. Add the canvas tag to the shared page
<canvas canvas-id="canvas"
style="position: absolute; top: -1000px; left: -1000px;width: 225px; height: 180px;"></canvas>
2. Introduce makeCanvas into the shared page (will be defined later) and use it in onShareAppMessage
onShareAppMessage(res) {
let shareMessage = {
title: '标题',
path: `要分享的page 路径`,
imageUrl: '图片url'
}
return new Promise((resolve, reject) => {
uni.showLoading({
title: '请求分享数据',
icon: 'none'
})
makeCanvas(shareMessage.imageUrl).then(imgPath => {
uni.hideLoading()
resolve({
title: shareMessage.title,
path: shareMessage.path,
imageUrl: imgPath
})
}).catch(err => {
uni.hideLoading()
resolve({
title: shareMessage.title,
path: shareMessage.path,
imageUrl:'处理失败后展示的图片，可以用原图shareMessage.imageUrl'
})
})
})
}
3. The main file for image processing (export makeCanvas), generally used as a tool kit, is introduced when needed.
Here, the image is processed to a size of 5:4, and the default generated image is in jpg format.
/**
* 生成分享5：4的图片
*/
const makeCanvas = (imgUrl) => {
return new Promise((resolve, reject) => {
// 获取图片信息,小程序下获取网络图片信息需先配置download域名白名单才能生效
uni.getImageInfo({
src: imgUrl,
success: (imgInfo) => {
let ctx = uni.createCanvasContext('canvas')
let canvasW = 0
let canvasH = imgInfo.height
// 把比例设置为 宽比高 5:4
canvasW = (imgInfo.height * 5) / 4
// 为画框设置背景色，注意要放在画图前，图会覆盖在背景色上
ctx.fillStyle = "#fff";
if (imgInfo.width > 225 || imgInfo.height > 180) {
canvasW = 225;
canvasH = 180;
ctx.fillRect(0, 0, canvasW, canvasH);
let dWidth = canvasW / imgInfo.width; // canvas与图片的宽度比例
let dHeight = canvasH / imgInfo.height; // canvas与图片的高度比例
let dWH = imgInfo.width / imgInfo.height; //宽高比
if (imgInfo.width > canvasW && imgInfo.height > canvasH) {
// console.log(dWH);
if (dWH > 1 && dWH < 1.5) {
ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,
0, imgInfo.width * dHeight, imgInfo
.height *
dHeight)
} else {
if (imgInfo.width > imgInfo.height) {
ctx.drawImage(imgInfo.path, 0, (canvasH - imgInfo.height *
dWidth) / 2, imgInfo.width * dWidth,
imgInfo.height *
dWidth)
}
if (imgInfo.width == imgInfo.height) {
ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width *
dHeight) / 2, 0, imgInfo.width * dHeight,
imgInfo
.height * dHeight)
}
if (imgInfo.width < imgInfo.height) {
ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width *
dHeight) / 2, 0, imgInfo.width * dHeight,
imgInfo
.height * dHeight)
}
}
} else {
if (imgInfo.width > imgInfo.height) {
ctx.drawImage(imgInfo.path, 0, (canvasH - imgInfo.height) / 2,
imgInfo.width * dWidth, imgInfo.height)
}
if (imgInfo.width == imgInfo.height) {
ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,
0, imgInfo.width * dHeight, imgInfo
.height *
dHeight)
}
if (imgInfo.width < imgInfo.height) {
ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,
0, imgInfo.width * dHeight, imgInfo
.height *
dHeight)
}
}
} else {
ctx.fillRect(0, 0, canvasW, canvasH)
ctx.drawImage(
imgInfo.path,
0,
0,
canvasW,
canvasH,
(canvasW - imgInfo.width) / 2, // 宽度从中间向两边填充
0,
canvasW,
canvasH
)
}
ctx.draw(false, () => {
uni.canvasToTempFilePath({
width: canvasW,
height: canvasH,
destWidth: 750, // 标准的iphone6尺寸的两倍，生成高清图
destHeight: 600,
canvasId: "canvas",
fileType: "jpg", // 注意jpg默认背景为透明
success: (res) => {
resolve(res.tempFilePath)
},
fail: (err) => {
reject(err)
}
})
})
},
fail: (err) => {
reject(err)
}
})
})
}
module.exports = {
makeCanvas,
}
You should be able to see the effect when you share it in the WeChat applet later.