我這里用的是uniapp上傳方法

上傳的方法

uni.chooseImage({count: 6, //默認9sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有sourceType: ['album'], //從相冊選擇success: (res) => {// console.log(res);this.base64AddWaterMaker(res.tempFiles[0].path, this.waterMakeConfig).then((res) => {console.log("res", res);this.img=res});}}); //處理水印的方法base64AddWaterMaker(base64Img, waterMakeConfig) {// 保留this指向 后面會用到的let _this = this;return new Promise((resolve, reject) => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const img = new Image();img.crossOrigin = 'Anonymous'; // 圖片加載的過程中允許出現跨域// 先有src屬性才會觸發 onload函數img.src = base64Img;// 異步加載img.onload = function() {// 注意img.onload方法是異步的canvas.width = img.width;canvas.height = img.height;ctx.font = `40px Georgia`;// 給文字添加顏色// ctx.fillStyle = 'red';// 添加漸變顏色的水印var gradient = ctx.createLinearGradient(0, 0, 200, 0);gradient.addColorStop(0, 'blue');gradient.addColorStop(1, 'red');ctx.fillStyle = gradient;// 以左上角為坐標原點 開始繪制圖像ctx.drawImage(img, 0, 0, img.width, img.height);ctx.fillText(waterMakeConfig.textArray[0], img.width * 0.05, img.height *0.8); //在圖片上添加字體ctx.fillText(waterMakeConfig.textArray[1], img.width * 0.05, img.height * 0.85);let resultBase64 = canvas.toDataURL('image/png'); // 返回的圖片文件也是base64格式的if (!resultBase64) {reject();} else {_this.imgBase64 = resultBase64;resolve(resultBase64);}};});},水印樣式waterMakeConfig: {font: 'microsoft yahei', //字體textArray: ['風-溫迪', '2022/9/1 10:13'],},

最終效果

總結

以上是生活随笔為你收集整理的VUE 图片上加文字水印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。