uniapp使用canvas绘制海报
·
Uniapp中使用canvas绘制海报可以按照以下步骤进行:
1. 引入需要绘制的图片资源
这些图片可以是本地的,也可以是远程的。可以将图片资源放在项目的`static`目录下,例如:`static/poster-bg.png`,`static/avatar.png`等。同时需要在`uni.json`中声明这些资源。
2. 创建canvas
在页面中创建一个`canvas`元素,设置宽高和`canvas-id`:
<canvas canvas-id="poster-canvas" style="width: 750rpx;height: 1334rpx;"></canvas>
3. 使用canvas绘制海报
在页面的`script`标签中,通过`uni.createCanvasContext`方法获取canvas绘制上下文,然后使用canvas绘制API进行绘制。例如:
import avatarUrl from '../../static/avatar.png';
import bgUrl from '../../static/poster-bg.png';
export default {
data() {
return {
avatar: null, // 头像图片对象
bg: null, // 背景图片对象
context: null, // canvas绘制上下文
}
},
onLoad() {
this.context = uni.createCanvasContext('poster-canvas', this); // 创建canvas绘制上下文
this.loadImage(avatarUrl, (avatar) => {
this.avatar = avatar; // 加载头像图片
this.loadImage(bgUrl, (bg) => {
this.bg = bg; // 加载背景图片
this.drawPoster(); // 绘制海报
});
});
},
methods: {
// 加载图片
loadImage(url, callback) {
const img = new Image();
img.src = url;
img.onload = () => {
callback(img);
}
},
// 绘制海报
drawPoster() {
this.context.drawImage(this.bg, 0, 0, 750, 1334); // 绘制背景图片
this.context.save(); // 保存绘制状态
this.context.beginPath();
this.context.arc(375, 160, 100, 0, 2 * Math.PI); // 绘制圆形
this.context.clip(); // 裁剪
this.context.drawImage(this.avatar, 275, 60, 200, 200); // 绘制头像
this.context.restore(); // 恢复绘制状态
this.context.setFillStyle('white'); // 设置填充色
this.context.setFontSize(36); // 设置字体大小
this.context.fillText('Hello world', 30, 370); // 绘制文本
//... 继续绘制其他内容
this.context.draw();
},
},
}
需要注意的是,绘制图片需要先加载图片对象,可以使用`Image`对象加载图片,然后在`onload`回调中获取图片对象进行绘制。同时,绘制海报的步骤可以分为多个函数,便于进行模块化开发。
4. 保存海报图片
可以通过`canvas`的`toTempFilePath`方法将绘制的海报转为图片数据流,再调用`uni.saveImageToPhotosAlbum`方法保存到相册中。注意,在安卓端需要获取保存图片权限。
uni.canvasToTempFilePath({
canvasId: 'poster-canvas',
success: res => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: '保存成功'
})
},
fail: () => {
uni.showToast({
title: '保存失败'
})
}
});
},
});
更多推荐


所有评论(0)