微信小程序图片加水印-使用新版Canvas实现

// index.js const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' Page({ data: { imgsrc: '', canvas: null, ctx: null, canvasWidth: 200, canvasHeight: 200, imgFilePath: '', fontSize: 36, rgba: 'rgb(0,0,0,1)', angle: 45 }, onReady() { const query = wx.createSelectorQuery() query.select('#myCanvas')// 在 WXML 中填入的 id .fields({ node: true, size: true }) .exec((res) => { // Canvas 对象 const canvas = res[0].node // 渲染上下文 const ctx = canvas.getContext('2d') this.setData({ canvas, ctx }) }) }, // 选择图片 async chooseImages() { const res = await wx.chooseMedia({}) this.setData({ imgFilePath: res.tempFiles[0].tempFilePath }) const addWatermarkRes = await this.addWatermark(res.tempFiles[0].tempFilePath) }, // 添加水印方法 (传入图片地址) addWatermark(tempFilePath) { if (!tempFilePath) { return } return new Promise( async (resolve, reject) => { wx.showLoading({ title: '水印生成中...', }) // 获取图片信息 const imgInfo = await wx.getImageInfo({ src: tempFilePath }) // 设置canvas宽高 this.data.canvas.width = imgInfo.width this.data.canvas.height = imgInfo.height this.data.canvasWidth = imgInfo.width this.data.canvasHeight = imgInfo.height // 创建一个图片对象 const image = this.data.canvas.createImage(); image.src = tempFilePath; image.onload = () => { // 将图片绘制到canvas上 this.data.ctx.drawImage(image, 0, 0, imgInfo.width, imgInfo.height) //水印文字样式相关 let maskText = '仅供XX使用'; //水印文字 let fontColor = this.data.rgba; let textWidth = this.data.fontSize * maskText.length; //水印文字宽度 let jd = this.data.angle;//角度 this.data.ctx.save() let interval = textWidth for (let x = 0; x < this.data.canvasWidth; x += interval ) { for (let y = 0; y < this.data.canvasHeight; y += interval ) { this.data.ctx.translate(x, y) this.data.ctx.rotate(jd * Math.PI / 180) this.data.ctx.font = this.data.fontSize + 'px Arial' this.data.ctx.fillStyle = fontColor this.data.ctx.fillText(maskText, 0, 0); this.data.ctx.restore() this.data.ctx.save() } } this.data.ctx.restore() // 将canvas转为图片 wx.canvasToTempFilePath({ canvas: this.data.canvas, success: (res) => { wx.hideLoading() this.setData({ imgsrc: res.tempFilePath }) resolve(res.tempFilePath) }, }) } }) }, // 预览图片 prevImage(){ if(this.data.imgsrc) { wx.previewImage({ current: this.data.imgsrc, // 当前显示图片的http链接 urls: [this.data.imgsrc] // 需要预览的图片http链接列表 }) } else { this.chooseImages() } }, bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, onChooseAvatar(e) { const { avatarUrl } = e.detail const { nickName } = this.data.userInfo this.setData({ "userInfo.avatarUrl": avatarUrl, hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl, }) }, onInputChange(e) { const nickName = e.detail.value const { avatarUrl } = this.data.userInfo this.setData({ "userInfo.nickName": nickName, hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl, }) }, getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, })