uniapp微信小程序在图片上添加标记
时间: 2023-12-09 08:02:56 浏览: 140
可以通过使用canvas来在图片上添加标记。
首先,需要在wxml文件中使用canvas标签,并设置canvas的id、宽高和背景图片路径:
```html
<canvas id="myCanvas" canvas-id="myCanvas" style="width:100%; height:100%;"></canvas>
```
然后在js文件中获取canvas元素,并在图片加载完成后将其绘制到canvas上:
```javascript
// 获取canvas元素
var ctx = wx.createCanvasContext('myCanvas');
// 加载图片
wx.getImageInfo({
src: '图片路径',
success: function (res) {
// 绘制图片到canvas上
ctx.drawImage(res.path, 0, 0, res.width, res.height);
// 绘制标记
ctx.setFillStyle('red');
ctx.fillRect(50, 50, 50, 50);
// 将canvas绘制成图片,并保存到相册
ctx.draw(false, function () {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
wx.showToast({
title: '保存成功'
});
}
})
}
});
});
}
})
```
在上面的代码中,我们先通过wx.getImageInfo方法获取图片信息,然后在success回调中将图片绘制到canvas上,并使用ctx.fillRect方法绘制一个红色的矩形标记。最后,使用wx.canvasToTempFilePath将canvas绘制成图片,并保存到相册。
注意:在绘制图片之前,需要先调用wx.createCanvasContext方法获取canvas上下文对象。
阅读全文