首页下载资源移动开发微信小程序图片加水印-使用新版Canvas实现

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

weixin_4227038127.45KB需要积分:1

资源文件列表:

AddWatermarkDemo.zip 大约有23个文件
  1. AddWatermarkDemo/
  2. AddWatermarkDemo/.eslintrc.js 587B
  3. AddWatermarkDemo/app.js 364B
  4. AddWatermarkDemo/app.json 348B
  5. AddWatermarkDemo/app.wxss 194B
  6. AddWatermarkDemo/images/
  7. AddWatermarkDemo/images/tip.jpg 22.5KB
  8. AddWatermarkDemo/pages/
  9. AddWatermarkDemo/pages/index/
  10. AddWatermarkDemo/pages/index/index.js 4.36KB
  11. AddWatermarkDemo/pages/index/index.json 30B
  12. AddWatermarkDemo/pages/index/index.wxml 338B
  13. AddWatermarkDemo/pages/index/index.wxss 973B
  14. AddWatermarkDemo/pages/logs/
  15. AddWatermarkDemo/pages/logs/logs.js 305B
  16. AddWatermarkDemo/pages/logs/logs.json 30B
  17. AddWatermarkDemo/pages/logs/logs.wxml 224B
  18. AddWatermarkDemo/pages/logs/logs.wxss 247B
  19. AddWatermarkDemo/project.config.json 559B
  20. AddWatermarkDemo/project.private.config.json 350B
  21. AddWatermarkDemo/sitemap.json 191B
  22. AddWatermarkDemo/utils/
  23. AddWatermarkDemo/utils/util.js 460B

资源介绍:

微信小程序图片加水印-使用新版Canvas实现 需要在 WXML 中添加 canvas 组件。 指定 id="myCanvas" 唯一标识一个 canvas,用于后续获取 Canvas 对象。 指定 type 用于定义画布类型,本例子使用 type="2d" 示例。 详情可查看相关文章:https://blog.csdn.net/weixin_42270381/article/details/140600106
// 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 }) } }) }, })
100+评论
captcha