uniapp Canvas绘制海报

最新推荐文章于 2025-07-07 02:47:27 发布

Aline:(

最新推荐文章于 2025-07-07 02:47:27 发布

阅读量880

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 小程序文章标签： vue.js uni-app canvas

本文链接：https://blog.youkuaiyun.com/weixin_44570900/article/details/120564129

在绘制的过程中可能会需要文字换行
文字换行在我上篇文章，链接：文字换行.
之前写过一个分享海报，但是觉得代码逻辑不清晰所以重新写一个
我们的需求是这样子的在这里插入图片描述

<view class="w-100 flex-column align-items-center" style="background:transparent !important;">
	<canvas id="mycanvas" canvas-id="mycanvas" style="width:270px;height:390px;background:#fff;"></canvas>
	<view @click="upLoadImg" >
		保存图片
	</view>
</view>

//canvas绘制部分
let ctx = uni.createCanvasContext('mycanvas', this);  // 创建canvas对象
// 这里注意的是网络图片需要用 uni.getImageInfo() 函数去下载下来才能进行绘制
			uni.getImageInfo({
				src: _this.detail.image,
				success(res) {
					// 下面的ckjg_width jtjg_width的宽度需要写在所在save的之前不然用的是save之后的样式去计算的宽度
					// 标题图片
					ctx.drawImage('../../static/image/canvas/real_title.png', 0, 0, 270, 40);