方案一: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

推荐文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: