uniapp给照片加水印

宽高除以3是因为在图片像素太大，则可能导致图片空白。

ios手机需设置destWidth和destHeight

 

/**
　　* 选择图片
*/
chooseImage(flag) {
　　uni.chooseImage({
　　　　count: 8,
　　　　sourceType:['camera'], //选择图片的来源，相册或照相
　　　　success: res => {
　　　　　　console.log(res);
　　　　　　for (let i = 0; i < res.tempFilePaths.length; i++) {
　　　　　　　　this.setimg(res.tempFilePaths[i])
　　　　　　}
　　　　}
　　});
},

//获取图片信息

setimg(path){

uni.showLoading({})

let date = '这是水印文字' ;

uni.getImageInfo({

　　src: path,

　　success: res => {

　　　　console.log(res);

　　　　this.w = res.width/3 + 'px';

　　　　this.h = res.height/3 + 'px';

　　　　//初始化画布

　　　　const ctx = uni.createCanvasContext('firstCanvas', this);

　　　　ctx.fillRect(0, 0, res.width, res.height);

　　　　//将图片src放到cancas内，宽高为图片大小

　　　　ctx.drawImage(res.path, 0, 0, res.width/3, res.height/3);

　　　　ctx.setFontSize(20);

　　　　// ctx.globalAlpha = 1;

　　　　ctx.setFillStyle('#ffffff');

let textToWidth = (res.width/3) - 200;

let textToHeight = (res.height/3) - 30;

ctx.fillText(date, textToWidth, textToHeight);

// 这个不加异步 第一次的图片显示不出来

setTimeout(() => {

　　　　　　ctx.draw(false, () => {

　　　　　　　　setTimeout(() => {

　　　　　　　　　　uni.canvasToTempFilePath({

//将画布中内容转成图片，即水印与图片合成

canvasId: 'firstCanvas',

x: 0,

y: 0,

width: res.width/3,

height: res.height/3,

destWidth: res.width/3,

destHeight: res.height/3,

success: ress => {

　　console.log(ress)

　　uni.saveImageToPhotosAlbum({//保存到手机

　　　　filePath: ress.tempFilePath,

　　　　success: () => {

　　　　　　console.log("水印图片保存成功");

　　　　　　uni.hideLoading()

　　　　}

　　})

},

fail: (err) => {

　　console.log(err);

}

　　　　　　　　　　});

　　　　　　　　}, 500);

　　　　　　});

　　　　},300);

　　}

});

},