小程序圖片添加水印

Taro、圖片水印

一、思路

利用canvas畫圖，將上傳的圖片畫到canvas，再加入自定義的元素，最終導(dǎo)出圖片即可。

二、實(shí)現(xiàn)

以下代碼和Api均為Taro實(shí)現(xiàn)

• 1.首頁，需要在頁面放置canvas標(biāo)簽，canvasWidth和canvasHeight根據(jù)需要添加水印的圖片寬高動(dòng)態(tài)計(jì)算。

   <View className='canvas-water'>
        <Canvas
          style={{
            width: canvasWidth + 'px',
            height: canvasHeight + 'px',
          }} canvasId='canvasWater'
        />
    </View>

由于小程序中canvas層級(jí)的特殊性，需要做一下特殊處理。

    .canvas-water {
        opacity: 0;
        width: 0;
        height: 0;
        visibility: hidden;
        position: absolute;
        z-index: -999;
        left: -99999px;
        top: -99999px;
        transform: translate(-99999px, -99999px,-99999px);
        canvas {
            position: absolute;
            z-index: -999;
            left: -99999px;
            top: -99999px;
            transform: translate(-99999px, -99999px,-99999px);
        }
    }

• 2.上傳圖片，獲得圖片數(shù)據(jù)

return new Promise(async (resolve, reject) => {
    Taro.chooseImage({
       count: 1,            // 最大上傳張數(shù)，只允許一張
       sizeType: ['compressed'], // 圖片類型，默認(rèn)縮略圖
       sourceType: ['album', 'camera'], // 照片源，相冊(cè)及相機(jī)
    }).then(res => {
        if (res.errMsg !== 'chooseImage:ok') {
            Taro.showToast({
                icon: 'none',
                title: '讀取失敗，請(qǐng)重新選擇照片'
            });
            reject(res);
        }
        // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        resolve(res.tempFiles[0].path);
    }, (err) => {
        reject(err);
    });
});

• 3.獲取圖片信息，設(shè)置canvas寬高

    let imgData = '...'; // 上一步上傳圖片獲得的數(shù)據(jù)
    // 獲取圖片寬高信息
    Taro.getImageInfo({
        src: imgData
    }).then(imgInfo => {
        // 設(shè)置canvas寬高
        this.setState({
            canvasWidth: imgInfo.width,
            canvasHeight: imgInfo.height,
        }, () => {
            // 可以等state完成后再去添加水印操作
            // 添加水印
            // ...
        });
    }, () => {
    });

• 4.通過canvas畫圖添加水印

網(wǎng)絡(luò)圖片需要下載才能繪制

/**
 * 繪制圖片水印
 * @param canvasId 
 * @param imgData 上傳的圖片data
 * @param imgInfo 圖片信息（寬、高）
 */
const drawImageWater = (canvasId, imgData, imgInfo) => {
    const nowTime = `2020.11.11`;
    return new Promise(async (resolve, reject) => {
        const ctx = Taro.createCanvasContext(canvasId); // 獲取canvas上下文
        // 清空畫布內(nèi)容，清除上次繪制內(nèi)容
        ctx.clearRect(0, 0, imgInfo.width, imgInfo.height);
        
        ctx.setGlobalAlpha(1);
        // 先將上傳的圖片繪制到canvas
        ctx.drawImage(imgData, 0, 0, imgInfo.width, imgInfo.height);

        /*** 添加網(wǎng)絡(luò)圖片的操作 S ***/
        // logo,網(wǎng)絡(luò)圖片需要下載才能繪制
        let iconSpace = await Taro.downloadFile({
            url: 'https://forguo-1302175274.cos.ap-shanghai.myqcloud.com/mobile-404.png'
        });
        ctx.drawImage(iconSpace.tempFilePath, imgInfo.width / 2 - 76, imgInfo.height / 2 - 58, 152, 58);
        /*** 添加網(wǎng)絡(luò)圖片的操作 E ***/

        /*** 添加字體的操作 S ***/
        ctx.setGlobalAlpha(0.75);
        ctx.setFontSize(Math.round(24)); // 43 動(dòng)態(tài)計(jì)算字體大小
        ctx.setFillStyle('#fff');
        ctx.setTextAlign('center');
        ctx.setTextBaseline('bottom');
        // 當(dāng)前日期
        ctx.fillText(nowTime, imgInfo.width / 2,  imgInfo.height / 2 + 65);
        /*** 添加字體的操作 E ***/
        
        ctx.draw(true, () => {
            // canvas轉(zhuǎn)圖片
            Taro.canvasToTempFilePath({
                fileType: 'jpg',
                quality: 0.8,
                x: 0,
                y: 0,
                width: imgInfo.width,
                height: imgInfo.height,
                destWidth: imgInfo.width,
                destHeight: imgInfo.height,
                canvasId: canvasId,
            }).then(res => {
                resolve(res.tempFilePath);
            }, (e) => {
                reject(e);
            });
        });
    });
};

• 5.添加水印結(jié)束，將得到的圖片上傳到服務(wù)器即可

用得到的臨時(shí)文件路徑直接使用Taro.uploadFile上傳

Taro.uploadFile({
    url: params.url,
    method: params.method || 'get',
    filePath: params.filePath,
    name: params.name,
    success: (res) => {
    },
    fail: (err) => {
    },
    complete: () => {
    }
})