看看效果
文章來源：http://www.zghlxwxcb.cn/news/detail-861594.html
實(shí)現(xiàn)步驟：
1.選擇圖片
/* 選擇背景圖片 對(duì)圖片的大小以及類型做一下限制 */
chooseImage(e) {
uni.chooseImage({
count: 1,
success: (res) => {
let index = res.tempFilePaths[0].lastIndexOf(".");
let imgUrl = res.tempFilePaths[0].substr(index + 1);
if (imgUrl != "png" && imgUrl != "jpg" && imgUrl != "jpeg") {
uni.showToast({
title: '請(qǐng)上傳jpg、jpeg、png類型的圖片',
icon: 'none'
});
return
}
if (res.tempFiles[0].size / 1024 < 1024 * 1024 * 20) {
this.originImg = res.tempFilePaths[0]
this.imageSrc = res.tempFilePaths[0]
this.loadImage();
} else {
uni.showToast({
title: '圖片大小不能超過20M，當(dāng)前大小' + (res.tempFiles[0].size / 1024).toFixed(
2) + 'KB',
icon: 'none'
})
}
},
});
},
圖片展示區(qū)域計(jì)算
/* 將圖片加載到畫布 */
loadImage() {
uni.showLoading({
title: "圖片加載中...",
});
/* 獲取圖片信息 */
uni.getImageInfo({
src: this.imageSrc,
success:(res) => {
let imgH = res.height;
let imgW = res.width;
/* 圖片的寬高比 */
IMG_RATIO = imgW / imgH;
/**
* 如果圖片更高一些，為確保圖片能夠完整在視窗內(nèi)顯示需如下處理
* 1. 縮放圖片的高為 視窗高度減去底部菜單按鈕高度（120）
* 2. 根據(jù)圖片縮放后的高度，根據(jù)圖片寬高比計(jì)算圖片的寬度
* 3. 如果步驟2計(jì)算的圖片寬度大于屏幕寬度，則需要再次調(diào)整圖片寬度為視窗寬度-margin(10)
* 4. 根據(jù)步驟3的寬度，結(jié)合圖片寬高比重新計(jì)算圖片的高度
*/
if (IMG_RATIO < 1 && (SCREEN_HEIGHT - 133) * IMG_RATIO < SCREEN_WIDTH - 10) {
IMG_REAL_W = (SCREEN_HEIGHT - 133) * IMG_RATIO;
IMG_REAL_H = SCREEN_HEIGHT - 133;
} else {
IMG_REAL_W = SCREEN_WIDTH - 10;
IMG_REAL_H = IMG_REAL_W / IMG_RATIO;
}
/* 裁剪區(qū)域的寬高同圖片尺寸 */
this.cropperW=IMG_REAL_W,
this.cropperH=IMG_REAL_H,
/* 上下左右各留一定的margin已便更好的拖動(dòng)裁剪區(qū)域 */
this.cropperL=Math.ceil((SCREEN_WIDTH - IMG_REAL_W) / 2),
/* 留出底部操作按鈕位置 70 */
this.cropperT=uni.getStorageSync("navHeight"),
// 圖片縮放值
this.imageW=IMG_REAL_W,
this.imageH=IMG_REAL_H,
this.isShowImg=true,
uni.hideLoading();
this.finish()
},
});
},
圖片水印canvas繪制
/* 完成裁剪，輸出裁剪后的圖片路徑 */
finish() {
uni.showLoading({
title: "圖片生成中...",
});
// 水印加載
const ctx = uni.createCanvasContext("myCanvas", this);
ctx.clearRect(0, 0, IMG_REAL_W, IMG_REAL_H);
// 將圖片寫入畫布
ctx.drawImage(this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
ctx.save();
ctx.beginPath();
if (['alone'].includes(this.changeMode)) {
ctx.beginPath()
ctx.setFontSize(this.changeSize)
ctx.setFillStyle(this.changeColor)
ctx.fillText(this.changeText, this.imageW - this.changeSize * this.changeText.length - 10, this.imageH - this.changeSize)
}
if (['level'].includes(this.changeMode)) {
for (let j = 1; j < 12; j++) {
ctx.beginPath()
ctx.setFontSize(this.changeSize)
ctx.setFillStyle(this.changeColor)
ctx.fillText(this.changeText, 0, 50 * j)
for (let i = 1; i < 12; i++) {
ctx.beginPath()
ctx.setFontSize(this.changeSize)
ctx.setFillStyle(this.changeColor)
ctx.fillText(this.changeText, (15 + (this.changeSize - 1) * this.changeText.length) * i, 50 * j)
}
}
}
if (["incline"].includes(this.changeMode)) {
ctx.font = this.changeSize + "px serif";
ctx.fillText(this.changeText, -1000, -1000)
const textWidth = ctx.measureText(this.changeText + "").width
const _textWidth = textWidth * 1.5
const _textHeight = 40
const xSize = Math.floor(this.imageW / _textWidth + 1)
const ySize = Math.floor(this.imageH / _textHeight + 1)
// 開始繪制水?。?/span>
// 左右各多出一半圖片寬度的水印，是用來處理旋轉(zhuǎn)后蓋住空白部分的；上下同理：
for (var x = 0; x < xSize * 2; x++) {
// x控制橫向多少個(gè)水?。?/span>
for (var y = 0; y < ySize * 2; y++) {
// y控制縱向多少個(gè)水?。?/span>
// 繪制文字 注意：：繪制斜體文字 旋轉(zhuǎn)以后會(huì)發(fā)生位移，所以必須在旋轉(zhuǎn)之后進(jìn)行位置的調(diào)整；
this.drawText(ctx, (this.imageW), (this.imageH), -this.imageW / 2 + ((x * _textWidth)), -this.imageH / 2 + ((y * _textHeight)))
}
}
}
ctx.draw(true, () => {
// 獲取畫布要裁剪的位置和寬度 均為百分比 * 畫布中圖片的寬度 保證了在微信小程序中裁剪的圖片模糊 位置不對(duì)的問題 canvasT = (this.cutT / this.cropperH) * (this.imageH / pixelRatio)
var canvasW = IMG_REAL_W;
var canvasH = IMG_REAL_H;
var canvasL = 0;
var canvasT = 0;
uni.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
// destWidth: canvasW,
// destHeight: canvasH,
quality: +this.quality,
fileType: this.fileType,
canvasId: "myCanvas",
success: (res) => {
uni.hideLoading();
// this.saveImg()
this.waterImgSrc = res.tempFilePath
},
fail: (err) => {
uni.hideLoading();
uni.showToast({
title: "圖片截取失?。?,
icon: "none",
});
},
},
this
);
});
},
drawText(ctx, imgWidth, imgHeight, x, y) {
var text = this.changeText;
ctx.save(); //保存原來的狀態(tài) 繪制字體都是需要旋轉(zhuǎn)傾斜 那么之前繪制的圖片就要進(jìn)行狀態(tài)的保存
// ctx.globalAlpha = 0.6
// 移動(dòng)到中心點(diǎn)，再旋轉(zhuǎn)相當(dāng)于按照之前的原點(diǎn)旋轉(zhuǎn)了
ctx.translate(imgWidth / 2, imgHeight / 2)
ctx.rotate(-Math.PI / 6); //繪制傾斜字體
// 移動(dòng)回原來的位置：
ctx.translate(-imgWidth / 2, -imgHeight / 2)
//ctx.translate(tsx, tsy); //發(fā)生位移進(jìn)行位移的恢復(fù)
ctx.font = this.changeSize + "px serif";
ctx.fillStyle = this.changeColor;
ctx.fillText(text, x, y);
ctx.restore(); //狀態(tài)的恢復(fù)
},
圖片保存邏輯
saveImg() {
const path = this.waterImgSrc
uni.showShareImageMenu({
path,
success: (res)=>{
console.log(res)
wx.showToast({
title: '生成成功！',
icon: 'success',
duration: 2000//持續(xù)的時(shí)間
})
},
fail: (err)=> {
console.log(err)
wx.showToast({
title: '生成失?。?,
icon: 'none',
duration: 2000//持續(xù)的時(shí)間
})
}
})
},
感覺有用的話，可以打賞一把么？一毛不嫌少，十塊不嫌多
更多詳細(xì)代碼請(qǐng)關(guān)注公眾號(hào)索?。▊渥ⅲ汗娞?hào)）：
文章來源地址http://www.zghlxwxcb.cn/news/detail-861594.html
到了這里，關(guān)于【小程序圖片水印】微信小程序圖片加水印功能 canvas繪圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
