You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
3.2 KiB

const {
API_BASE_URL,
IMG_BASE_URL
} = require('../api/api')
const watermarkImg = "../../img/watermark.png"; //水印图
/**
*
* 绘制水印
*
* @param {*} tempFilePath 图片路径
* @param {*} photoName
* @param {*} data 数据源
*/
async function addWatermark(tempFilePath, data) {
let canvasWidth = wx.getSystemInfoSync().screenWidth, canvasHeight=0;
//获取图片信息
await wx.getImageInfo({
src: tempFilePath,
}).then(res => {
let watermarkScale = res.width / canvasWidth;
canvasHeight = Math.round(res.height / watermarkScale);
canvasWidth = res.width
canvasHeight = res.height
});
return new Promise(async (resolve, reject) => {
wx.showLoading({
title: '绘制图片中',
mask: true
})
console.log("页面数据", tempFilePath)
const dpr = wx.getSystemInfoSync().pixelRatio;
//阴影的高度
const shadowHeight = Math.max(canvasWidth, canvasHeight)
//创建画笔
const ctx = data.canvas.getContext('2d')
//设置画布大小
data.canvas.width = canvasWidt
data.canvas.height = canvasHeight
// ctx.scale(dpr, dpr)
// 创建图片对象
const image = data.canvas.createImage();
//设置图片路径
image.src = tempFilePath;
//绘制照片
image.onload = () => {
//绘制定位图标
const imageWatermark = data.canvas.createImage();
imageWatermark.src = watermarkImg
imageWatermark.onload = () => {
ctx.drawImage(imageWatermark, 0, 0, shadowHeight, shadowHeight)
}
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)
//绘制完成后将canvas转为为图片
setTimeout(() => {
wx.hideLoading()
wx.showLoading({
title: '请稍后',
mask: true
})
console.log("基础库信息", wx.getSystemInfoSync().SDKVersion)
wx.canvasToTempFilePath({
canvas: data.canvas,
fileType: 'jpg',
quality: 1,
success: (res) => {
console.log("绘制图片成功", res);
wx.uploadFile({
url: API_BASE_URL + 'common/weChat/uploadImage',
filePath: res.tempFilePath,
name: 'file',
complete: function (res) {
wx.hideLoading()
console.log("上传图片", res)
if (res.statusCode == 200) {
const item = {
url: "",
name: "",
}
item.url = IMG_BASE_URL + res.data;
item.name = res.data;
resolve(item)
} else {
wx.showToast({
title: "选择失败",
icon: 'none'
})
}
}
})
},
fail: (res) => {
console.log("绘制图片失败", res)
wx.showToast({
title: "绘制失败",
icon: 'none'
})
}
})
}, 500)
}
})
}
module.exports = {
addWatermark
}