钉钉小程序拍照并加水印保存本地
钉钉小程序可以通过调用相机组件来实现拍照功能,同时使用canvas组件和微信小程序提供的api来实现给照片加水印并保存本地的功能。具体步骤如下:
- 在wxml文件中添加相机组件和canvas组件。
<camera id="camera" mode="normal" device-position="{{cameraPosition}}" bindstop="onCameraStop"></camera>
<canvas canvas-id="canvas" style="display:none;"></canvas>
- 在js文件中获取相机组件和canvas组件,并监听拍照事件。
Page({
data: {
cameraPosition: 'back'
},
onCameraStop(e) {
// 监听拍照事件,将照片转化为base64格式
const { tempImagePath } = e.detail;
wx.getFileSystemManager().readFile({
filePath: tempImagePath,
encoding: "base64",
success: (res) => {
const base64Data = `data:image/jpeg;base64,${res.data}`;
// 将拍照的照片传入canvas组件
const ctx = wx.createCanvasContext('canvas');
ctx.drawImage(base64Data, 0, 0, 300, 400);
// 给照片添加水印
ctx.setFontSize(20);
ctx.setFillStyle('#fff');
ctx.fillText('这是一个水印', 10, 30);
ctx.draw(false, () => {
// 将加水印后的照片保存到本地
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 400,
canvasId: 'canvas',
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail: () => {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
})
}
})
}
})
});
}
})
}
})
- 在小程序的json文件中添加权限配置,以便用户授权保存照片到相册。
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序获取你的位置"
},
"scope.writePhotosAlbum": {
"desc": "你的相册将用于保存照片"
}
}
}
通过以上三个步骤,我们就可以在钉钉小程序中实现拍照并加水印保存本地的功能了
原文地址: https://www.cveoy.top/t/topic/g1Ml 著作权归作者所有。请勿转载和采集!