小程序使用 canvas 給圖片添加水印
操作 canvas 相關(guān)的 api 使用的是微信最新提供的 (一路過來踩了好多坑...)
淺用微信小程序 canvas 給圖片添加簡單水印, 廢話不多說, 先上效果, 后看代碼 (uniapp等框架寫法大同小異)
效果圖
image.png
image.png
代碼部分 (沒有細(xì)分拆開來講, 但大部分代碼都加解釋注釋了)
WXML
<view class="container">
<button bindtap="chooseImages">選擇圖片</button>
<view>
<image src="{{imgsrc}}" mode="aspectFit" bindtap="prevImage"></image>
</view>
</view>
<canvas style="position:fixed;top: 0;left: -100%" type="2d" id="Canvas"></canvas>
JavaScript
Page({
data: {
imgsrc: '',
canvas: null,
ctx: null,
},
// 在頁面初次渲染完成生命周期獲取操作canvas的上下文對象
onReady() {
const query = wx.createSelectorQuery()
query.select('#Canvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
this.setData({ canvas, ctx })
})
},
// 選擇圖片
async chooseImages() {
const res = await wx.chooseImage({})
const addWatermarkRes = await this.addWatermark(res.tempFilePaths[0])
},
// 添加水印方法 (傳入圖片地址)
addWatermark(tempFilePath) {
return new Promise( async (resolve, reject) => {
// 獲取圖片信息
const imgInfo = await wx.getImageInfo({ src: tempFilePath })
// 設(shè)置canvas寬高
this.data.canvas.width = imgInfo.width
this.data.canvas.height = imgInfo.height
// 創(chuàng)建一個(gè)圖片對象
const image = this.data.canvas.createImage();
image.src = tempFilePath;
image.onload = () => {
// 將圖片繪制到canvas上
this.data.ctx.drawImage(image, 0, 0, imgInfo.width, imgInfo.height)
// 設(shè)置文字字號及字體
this.data.ctx.font = '32px sans-serif'
// 設(shè)置畫筆顏色
this.data.ctx.fillStyle = 'rgba(0,0,0,0.3)';
// 繪制矩形
this.data.ctx.fillRect(0, imgInfo.height - 40, 420, 40)
// 設(shè)置畫筆顏色
this.data.ctx.fillStyle = '#ffffff';
// 填入文字
this.data.ctx.fillText('品名: 巨無霸漢堡; 單價(jià): 20元', 0, imgInfo.height - 10)
// 將canvas轉(zhuǎn)為為圖片
wx.canvasToTempFilePath({
canvas: this.data.canvas,
success: (res) => {
this.setData({ imgsrc: res.tempFilePath})
resolve(res.tempFilePath)
},
})
}
})
},
// 預(yù)覽圖片
prevImage(){
wx.previewImage({
current: this.data.imgsrc, // 當(dāng)前顯示圖片的http鏈接
urls: [this.data.imgsrc] // 需要預(yù)覽的圖片http鏈接列表
})
}
})
有問題可以評論區(qū)或者私信討論哈
