首页下载资源移动开发微信小程序图片加水印-使用新版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

    相关资源

    1. 一款好看的安全跳转单页html源码

      ifree_code#前端ZIP2.38KB7月前
      资源摘要:一款好看的安全跳转单页html源码

    2. 暑期学什么？-关于Pycharm

      qq_45812950#后端ZIP145.94KB7月前
      资源摘要:暑期学什么？-关于Pycharm

    3. 11111111111111111111111111

      qq_44131712#操作系统ZIP7.9MB7月前
      资源摘要:11111111111111111111111111

    4. 计算机组成原理课程设计代码+报告-Project1 VerilogHDL完成单周期处理器开发

      m0_73396750#硬件开发ZIP1.7MB7月前
      资源摘要:Project1 VerilogHDL完成单周期处理器开发（使用ModelSim仿真软件）一、设计说明1.处理器应实现MIPS-Lite1指令集。a)MIPS-Lite1＝{MIPS-Lite，addi，addiu， slt，jal，jr}。b)MIPS-Lite指令集：addu，subu，ori，lw，sw，beq，lui，j。c)addi应支持溢出，溢出标志写入寄存器$30中第0位。2.处理器为单周期设计。

    5. 海螺影视主题模板M3.1

      u014552768#后端ZIP1.29MB7月前
      资源摘要:上传模板至template目录内后台快捷菜单配置添加:/admin.php/admin/conch/theme

    6. 仓库管理系统（正版）正式用户

      yyyyccccssss#操作系统ZIP23.31MB7月前
      资源摘要:仓库管理系统，永久免费，无广告，

    7. 前端可视化素材包，用于可视化开发

      qq_52619560#前端ZIP72.13MB7月前
      资源摘要:内容丰富可视化素材包内含多种类型的素材：图表类型：包括柱状图、折线图、饼图、面积图、散点图、雷达图等。每种图表都提供多种配色方案和样式，以满足不同的设计需求。图形元素：涵盖了基本形状（如圆形、矩形、三角形）和复杂图形（如流程图、组织结构图、关系图等）。图标集：提供数百个精美图标，涵盖常见操作（如添加、删除、编辑）、文件类型、社交媒体标志和其他应用场景。模板：包括仪表板模板、报告模板、演示文稿模板等，帮助用户快速开始设计工作。颜色和字体：内置多种配色方案和字体样式，确保视觉设计的统一和专业。优势与特点易于使用：所有素材都经过优化，支持主流设计工具（如Adobe XD、Sketch、Figma等）和开发框架（如React、Vue、Angular等）。只需简单的拖放操作，即可快速集成到您的项目中。高质量：所有图形和图标均为矢量格式，保证在不同分辨率和设备上都能呈现出最佳效果。无论是高清显示器还是移动设备，您的设计都能保持清晰和精美。可定制性强：每个元素都可以根据需要进行调整，包括颜色、大小、线条粗细等。用户可以轻松定制素材，以匹配品牌风格或特定项目需求。

    8. MATLAB智能算法30个案例源代码

      qq_52061005#人工智能ZIP11.8MB7月前
      资源摘要:《MATLAB智能算法30个案例分析》采用案例形式,以智能算法为主线,讲解了遗传算法、免疫算法、退火算法、粒子群算法、鱼群算法、蚁群算法和神经网络算法等Z常用的智能算法的MATLAB实现.本书共给出３０个案例,每个案例都是一个使用智能算法解决问题的具体实例,所有案例均由理论讲解、案例背景、MATLAB程序实现和扩展阅读四个部分组成。
    站长QQ:九六九五七三七