方案一：h5中转页
1、利用web端插件html2canvas将dom转成图片 --h5端
// 入参请参考文档：http://www.dtmao.cc/ios/65361.html
html2canvas(refdom, {
useCORS: true,
scale: 2
}).then((canvas) => {
const imgUrl= canvas.toDataURL();
console.log('图片url打印：', imgUrl)
}).catch(err => {
console.log('err:', err)
})
2、拿到图片信息后，设置自动返回对应页面，同时将图片信息返回给对应界面展示 --小程序端
方案二：wxml-to-canvas插件
可直接参考文档：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/wxml-to-canvas.html
方案三：将dom绘画在canvas上，然后再将canvas转成图片
1、.wxml文件
2、.ts文件
data = {
// 画布相对ui图放大比例
posterSize: 2
};
onShare() {
try {
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec(async res => {
const { posterSize } = this.data
wx.showLoading({
title: '海报生成中',
mask: false,
});
// Canvas 对象
const canvas = res[0].node
// Canvas 画布的实际绘制宽高
const renderWidth = 300 * posterSize
const renderHeight = 400 * posterSize
// Canvas 绘制上下文
const ctx = canvas.getContext('2d')
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = renderWidth * dpr
canvas.height = renderHeight * dpr
ctx.scale(dpr, dpr)
// 插入直播间分享图
await this.createdImg(canvas, ctx, 'https://resurl.fuchuang.com/aef734b0-0b5b-11ee-b3ac-abf6790ece2d-juxingbeifen%402x.png', [0, 0, 300, 240]);
// 画个圆形将超出圆形部分的图片裁剪为圆形一样大
// 保存当前 Canvas 画布状态
ctx.save()
// 先画圆形
ctx.beginPath();
ctx.arc(235 * posterSize, 340 * posterSize, 48 * posterSize, 0, 2 * Math.PI * posterSize);
// 设置绘制圆形边框的颜色
ctx.strokeStyle = '#ffffff';
// 绘制圆形边框
ctx.stroke();
ctx.fillStyle = "#ffffff"
ctx.fill();
// 插入小程序二维码
ctx.clip()
await this.createdImg(canvas, ctx, 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM7obwOicODY0ZfvZdp5VOoVLTxY0hibU7tq1UkFUUE7sC3Q/0', [200, 305, 70, 70]);
// 恢复到保存时的状态
ctx.restore()
ctx.fillStyle = '#333333';
ctx.font = `bold ${16 * posterSize}px 苹方-简 中粗体`;
// 绘制直播间名称
ctx.fillText('直播间名称', 12 * posterSize, 268 * posterSize);
ctx.font = `${12 * posterSize}px 苹方-简 常规体`;
ctx.fillText('我是文本内容', 38 * posterSize, 332 * posterSize);
ctx.fillStyle = '#999999';
ctx.font = `${10 * posterSize}px 苹方-简 常规体`;
ctx.fillText('小程序直播', 30 * posterSize, 370 * posterSize);
// 把当前画布指定区域的内容导出生成指定大小的图片
wx.canvasToTempFilePath({
canvas: canvas,
success: (res) => {
// 分享给朋友
wx.showShareImageMenu({
path: res.tempFilePath,
success: (resShare: any) => {
console.log('showShareImageMenu调用成功：', resShare);
},
fail: (err: any) => {
console.log('showShareImageMenu调用失败：', err);
}
});
},
fail: (err) => {
console.log('canvasToTempFilePath调用失败:', err);
},
complete: () => {
wx.hideLoading();
},
});
})
} catch (error) {
wx.hideLoading();
wx.showToast({
icon: 'none',
title: error?.message || '分享失败',
});
}
}
// 绘制图片
async createdImg(canvas: any, ctx: any, url: any, position: Array
// 基础库版本必须高于2.27.3，最好低版本兼容，版本太低，提示用户升级到微信最新版本，此处不做处理，可参考文档https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
const img = canvas.createImage();
await new Promise((resolve) => {
img.onload = resolve;
img.src = url;
});
const { posterSize } = this.data
// 把图片画到canvas 上
const x = position[0] * posterSize;
const y = position[1] * posterSize;
const width = position[2] * posterSize;
const height = position[3] * posterSize;
ctx.clearRect(x, y, width, height);
ctx.drawImage(img, x, y, width, height);
}
3、.wxss文件
#myCanvas {
position: fixed;
top: -1000rpx;
left: 0;
}
1、之所以不用离线画布，是因为canvasToTempFilePath对离线画布支持度不好，安卓正常，ios机读取失败， 参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
推荐文章
您阅读本篇文章共花了： 大家都在找：
小程序：小程序微信认证申请入口
javascript：javascript是什么
开发语言：开发语言排行榜
发表评论