選擇圖片后使用canvas繪制圖片，再繪制需要的水印文字，將繪制好的畫布轉(zhuǎn)化為圖片即可文章來源：http://www.zghlxwxcb.cn/news/detail-682880.html
<template>
<view class='photoPage'>
<nav-text text='照片加水印' backgroundColor='#1e65ff' :isHome='false' color='#ffffff'> </nav-text>
<!-- 放置canvas畫布并將其移出畫面外 -->
<canvas :style="'width: '+canvasWidth+'px; height:'+canvasHeight+'px; position:fixed;left:8888px'"
canvas-id="canvas"></canvas>
<button @click="chooseImage">上傳照片</button>
<!-- 最終效果照片 -->
<image :src="src" mode="aspectFit" width="100%"></image>
</view>
</template>
<script>
import navText from '@/components/navBarText.vue';
export default {
components: {
navText,
},
data() {
return {
src: '',
canvasWidth: 0,
canvasHeight: 0
}
},
methods: {
chooseImage() {
let _this = this
uni.chooseImage({
sourceType: ['album', 'camera'],
success: (res) => {
_this.compress(res.tempFilePaths[0])
}
});
},
compress(imageUrl) {
var _this = this;
//獲取原圖片信息
uni.getImageInfo({
src: imageUrl,
success: function(res) {
// 設(shè)置canvas寬高等于原圖片寬高
_this.canvasWidth = res.width;
_this.canvasHeight = res.height;
// 創(chuàng)建 canvas 的繪圖上下文
const ctx = uni.createCanvasContext('canvas');
// 繪制圖片
ctx.drawImage(imageUrl, 0, 0, _this.canvasWidth, _this.canvasHeight);
// 設(shè)置水印顏色大小
ctx.setFillStyle('white');
ctx.setFontSize(50);
// 水印文字
let time = new Date().toLocaleString();
// 繪制水印文字
ctx.fillText(time, 10, res.height - 50);
// 畫到 canvas 中
ctx.draw(false, function() { // 參數(shù)1: 本次繪制是否接著上一次繪制 參數(shù)2: 繪制完成的回調(diào)
// 將畫布轉(zhuǎn)化為圖片
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: function(res1) {
_this.src = res1
.tempFilePath
}
})
})
}
})
}
}
}
</script>
<style scoped>
</style>
最終效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-682880.html
到了這里，關(guān)于微信小程序給圖片加水印【使用uni-app】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
