使用微信小程序生成海报

最新推荐文章于 2024-05-17 08:40:15 发布
最新推荐文章于 2024-05-17 08:40:15 发布
阅读量2.5k 收藏 22
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36990322/article/details/103101226
版权

如何自适应实现微信小程序生成海报

前言

说实话，刚收到这个需求时，领导给我演示了一下，以为是个很高大上的功能。找了领导给的小程序生成海报功能的图片做测试，经过我不懈的 努力后 百度后，发现这原来只不过是canvas生成一张图片罢了。，那么问题来了，什么是canvas，呃呃，canvas就是。。。
读者：废话少说，先给看看效果吧，我：好嘞，客官

补充：手机上图片需要网络图片，且先下载准备临时图片地址，最下面有代码演示

(https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html).

效果

原图
在这里插入图片描述
点击生成海报
在这里插入图片描述
啪，灯神出。。。
在这里插入图片描述
好了，效果图也看完了，是不是你想要的效果？如果不是你也不用看下去了。好，接下来咱进入下一个阶段，代码实现

还想多说几句

因为我百度了其他大佬们的代码，发现他们居然没怎么考虑自适应问题。小程序本身就自带了rpx这样的玩意，那我们也就更方便了。先把设计稿放到ps里，Alt+i+i将设计稿缩小为750px的宽，然后直接测量每一个元素的坐标，如下图（相信大家都是一个成熟的前端了，怎么用测量工具就不使用用我来过多说了）
在这里插入图片描述
这次真的不多说了，下面上代码

wxml

<!--pages/detail/index.wxml-->
<view class="container">
  <view class="btn">
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">
      <view class="text">生成海报</view>
    </button>
  </view>

  <!-- 生成海报 -->
  <view 
    class="poster-box"
    wx:if='{{isPhotoModel}}' 
    bindtap="setPhotoModel"
  >
    <canvas canvas-id="mycanvas" style="width:{{posterW}}px;height:{{posterW}}px; "/>
    <image  mode="widthFix" src='{{shareImagePath}}' wx:if='{{shareImagePath}}'></image>
    <view class="close-save">关闭并保存海报</view>
  </view>
</view>

CSS

/* pages/poster/index.wxss */
.container{
  padding-top: 400rpx;
}
/* 海报弹框 */
.poster-box{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  z-index: 100; 
}
.poster-box canvas{
  position: absolute;
  top:0;
  left:10000px;
  bottom:0;
  right:0;
  margin:auto;
  background: #fff;
}
.poster-box image{
  width: 90%;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}
.poster-box .close-save{
  width: 300rpx;
  position: absolute;
  left:0;
  bottom: 10%;
  right:0;
  margin:auto;
  border-radius: 10rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  text-align: center;
  background: #fff;
  color: #aaa;
  }

JS

// pages/detail/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 分享海报图片
    shareImagePath: "",
    // 分享的小程序码
    qtsheXcxCode: "/images/image/wx-code.png",
    // 分享的用户姓名
    userName: "你的名字",
    // 分享的用户头像
    userHeadUrl: "/images/image/head-img.png",
    // 分享的海报背景图片
    qtsheBackground: "/images/image/poster-img.png",
    // 海报弹框
    isPhotoModel: false,
    // 海报宽高
    posterW: 0,
    posterH: 0,
    Rpx: 0,

  },

  /**
   * 功能函数 *
   */
  // 获取容器高度 提前设置好canvas宽高
  getContentHeight() {
    wx.getSystemInfo({
      success: (res) => {
        // console.log(res)
        this.setData({
          Rpx: res.windowWidth / 750,
          posterW: res.windowWidth,
          posterH: res.windowWidth,
        })
      }
    })
  },
  // 获取用户信息
  getUserInfo(res) {
    console.log(res)
    // 获取用户信息失败
    if (res.detail.errMsg !== "getUserInfo:ok") {
      return false;
    }
    this.setData({
      userName: res.detail.userInfo.nickName,
      // userHeadUrl: res.detail.userInfo.avatarUrl,
      // qtsheBackground: "",
    });
    this.createNewImg();
  },
  // 海报弹框隐藏显示
  setPhotoModel() {
    this.setData({
      isPhotoModel: !this.data.isPhotoModel
    })
  },
  /**
   * 海报绘制函数 *
   */
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg() {
    wx.showLoading({
      title: '正在生成海报...',
      mask: true
    })
    let that = this
    let ctx = wx.createCanvasContext('mycanvas')
    // 绘制背景
    this.setBg(ctx);
    //绘制背景图片
    this.setBgImage(ctx);
    // 绘制头像
    this.setAvatar(ctx);
    // 名字
    this.setName(ctx);
    // 名字下的标题1
    this.setText({ ctx: ctx, text: "邀请你免费学习", size: 30, x: 150, y: 412, color: "#A2A2A2" });
    // 名字下的标题2
    this.setText({ ctx: ctx, text: "混沌学院", size: 30, x: 393, y: 412, color: "#c1bba8" });
    // 名字下的标题3
    this.setText({ ctx: ctx, text: "重磅好课", size: 30, x: 536, y: 412, color: "#A2A2A2" });
    // 绘制线条
    this.setLine(ctx);
    // 绘制小程序码
    this.setQrcode(ctx);
    // 小程序码旁边的文字
    this.setText({ ctx: ctx, text: "扫码升级你的思维", size: 30, x: 257, y: 577, color: "#d3d3d3" });
    this.setText({ ctx: ctx, text: "开课后72小时内免费学习此课程", size: 30, x: 257, y: 634, color: "#d3d3d3" });
    // 结束绘制
    ctx.draw()
    // 保存
    ctx.save()
    // 展示海报弹框
    this.setPhotoModel();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          console.log(res)
          wx.hideLoading()
          that.setData({
            shareImagePath: res.tempFilePath
          });
        },
        fail: function (res) {
          console.log(res.errMsg)
          wx.showToast({
            title: '保存失败，请刷新页面重试',
            icon: 'none'
          })
        }
      }, this)
    }, 2000)
  },
  // 绘制背景
  setBg(ctx) {
    let { Rpx } = this.data
    let W = 750 * Rpx
    let H = 750 * Rpx
    ctx.setFillStyle('#FFFFFF')
    ctx.fillRect(0, 0, W, H)
  },
  // 绘制背景海报
  setBgImage(ctx) {
    let { qtsheBackground } = this.data
    this.setImage({ ctx: ctx, imageUrl: qtsheBackground, x: 0, y: 0, W: 750, H: 305 })
  },
  /*
  * 绘制用户头像
  * cx cy 是圆心到画布原点坐标
  * r*2是上面圆的直径，也是头像的宽高
  */
  setAvatar(ctx) {
    let { Rpx } = this.data
    // 先画个圆形区域
    let cx = 83 * Rpx;
    let cy = 400 * Rpx;
    let r = 50 * Rpx;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    // 将头像绘制在圆里边
    let path = this.data.userHeadUrl;
    this.setImage({ ctx: ctx, imageUrl: path, x: 35, y: 353, W: 100, H: 100 })
  },
  // 昵称绘制
  setName(ctx) {
    let text = this.data.userName + "我是测试昵称";
    if (text.length >= 8) {
      text = text.substring(0, 7) + '...'
    }
    this.setText({ ctx: ctx, text: text, size: 34, x: 150, y: 354, color: "#000" });
  },
  /**
   * @title 文字绘制
   * @params obj object 绘制对象
   * @params obj.ctx object 画布对象
   * @params obj.text string 绘制文字
   * @params obj.size number 绘制文字尺寸
   * @params obj.x number 绘制文字x坐标
   * @params obj.y number 绘制文字y坐标
   * @params obj.color string 绘制文字颜色
   */
  setText(obj) {
    let { Rpx } = this.data
    let ctx = obj.ctx;
    let text = obj.text || "";
    let size = obj.size * Rpx || 30;
    let x = obj.x * Rpx || 0;
    let y = obj.y * Rpx || 0;
    let color = obj.color || "black";
    ctx.setTextBaseline('top')
    ctx.setFillStyle(color)
    ctx.setFontSize(size)
    ctx.fillText(text, x, y)
  },
  /**
   * @title 图片绘制
   * @params obj object 绘制对象
   * @params obj.ctx object 画布对象
   * @params obj.imageUrl string 绘制图片地址（真实地址）
   * @params obj.x number 绘制图片x坐标
   * @params obj.y number 绘制图片y坐标
   * @params obj.W number 绘制图片宽
   * @params obj.H string 绘制图片高
   */
  setImage(obj) {
    let { Rpx } = this.data
    let ctx = obj.ctx;
    let imageUrl = obj.imageUrl || "";
    let x = obj.x * Rpx || 0;
    let y = obj.y * Rpx || 0;
    let W = obj.W * Rpx || 0;
    let H = obj.H * Rpx || 0;
    ctx.drawImage(imageUrl, x, y, W, H);
  },
  // 绘制昵称下的线条
  setLine(ctx) {
    let { Rpx } = this.data
    let x1 = 50 * Rpx;
    let y1 = 493 * Rpx;
    let x2 = 700 * Rpx;
    let y2 = 493 * Rpx;
    ctx.setStrokeStyle('#d8d8d8')
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.closePath()
    ctx.stroke()
  },
  // 绘制小程序码
  setQrcode(ctx) {
    let { qtsheXcxCode } = this.data
    this.setImage({ ctx: ctx, imageUrl: qtsheXcxCode, x: 50, y: 534, W: 180, H: 180 })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取容器高度 需要提前预设好canvas的宽高啊 提前预设好canvas的宽高啊 提前预设好canvas的宽高啊 
    this.getContentHeight();
  },
})

下载网络图片保存临时路径

这是一个关键步骤，很重要，我们需要先将网络图片保存到本地，再去绘制海报，图片地址路径需要加入下载白名单
代码如下


  /**
   * 保存网络图片临时地址
   * @imgSrc string 图片地址
   * @dataValue string 图片地址存储属性
   * @func function 回调函数
   */ 
  savaImageUrl({ imgSrc, dataValue, func}={}){
    let that = this;
    wx.downloadFile({
      url: imgSrc,
      success: function (res) {
        console.log(res);
        that.setData({ [dataValue]: res.tempFilePath})
        func();
      },
      fail: function (res) {
        console.log(res.errMsg)
        wx.showToast({
          title: '保存失败，请刷新页面重试',
          icon: 'none'
        })
      }
    })
  },

当需要下载多张图片时， 调用演示如下

  // 获取用户信息 该函数挂在小程序的button上
  getUserInfo(res){
    console.log(res)
    // 获取用户信息失败
    if (res.detail.errMsg !== "getUserInfo:ok"){
      return false;
    }
    this.setData({
      userName: res.detail.userInfo.nickName,
      userHeadUrl: res.detail.userInfo.avatarUrl,
    });
    const { qtsheXcxCode, qtsheBackground ,userHeadUrl } = this.data;
    wx.showLoading({
      title: '正在生成海报...',
      mask: true
    })
    const func1 = ()=>{ 
      this.savaImageUrl({
        imgSrc: userHeadUrl,
        dataValue: "userHeadUrl1",
        func:()=>{
          this.createNewImg()
        } 
      })
    }
    const func2 = ()=>{
      this.savaImageUrl({
        imgSrc: qtsheXcxCode,
        dataValue: "qtsheXcxCode1",
        func: func1
      })
    }
    const func3 = ()=>{
      this.savaImageUrl({
        imgSrc: qtsheBackground,
        dataValue: "qtsheBackground1",
        func: func2
      })
    }
    func3();
  },

保存海报

弄个按钮点击保存当前生成的海报，放在生成canvas图片函数里也行

  // 保存海报
  saveImg() {
    let that = this;
    // 获取用户是否开启用户授权相册
    wx.getSetting({
      success(res) {
        // 如果没有则获取授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              wx.saveImageToPhotosAlbum({
                filePath: that.data.shareImagePath,
                success() {
                  wx.showToast({
                    title: '保存成功'
                  })
                },
                fail() {
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                }
              })
            },
            fail() {
              // 如果用户拒绝过或没有授权，则再次打开分享口
            }
          })
        } else {
          // 有则直接保存
          wx.saveImageToPhotosAlbum({
            filePath: that.data.shareImagePath,
            success() {
              wx.showToast({
                title: '保存成功'
              })
            },
            fail() {
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        }
      }
    })
  },

结语

看完了吧，canvas真的难吗，难！但是我们现在想要实现的效果难吗？现在这个效果就是切图画界面嘛。多去看看文档和大佬们的代码，有些以前的难，也就不难了

需要提前预设好canvas的宽高啊 提前预设好canvas的宽高啊 提前预设好canvas的宽高啊 重要的事情说三遍

checkMa
关注
  • 1
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序开发中的图像处理和海报生成
吃不胖.
04-22 422
在微信小程序开发中，图像处理和海报生成是非常常见的需求。本文将通过代码案例的方式，详细介绍如何使用微信小程序提供的图像处理接口，以及如何通过代码生成海报。
微信小程序使用canvas自适应屏幕画海报并保存图片功能
10-16
主要介绍了小程序使用canvas自适应屏幕画海报并保存图片功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序生成海报图
最新发布
qq_41687299的博客
05-17 408
微信小程序生成海报图
微信小程序实现画布生成海报功能
前端开发工程师博客
04-06 2618
微信小程序实现画布生成海报功能。
uni-app使用canvas制作海报并保存到本地相册（超级详细）
qq_61869009的博客
12-26 2654
分析案例图都有哪些元素 1.渐变背景 2.圆形头像 3.文字 4.文字超出换行 5.图片居中 6.文字居中 7.单位适配 8.弹窗保存图片。因为一个个绘制图形太麻烦所以这里都采用了方法封装。 canvas api介绍 最后有全部代码，复制即用。 data数据 1.单位适配 拿到当前设备宽度用来做整个canvas的单位适配。这里根据要求高度是不变的，因为高度适配的话不同设备下最后生成的canvas 图片会被压缩。 3.圆形头像 增加了阴影的效果 5.文字超出换行 6.图片居中 这里是中间的背景图比较简单
uniapp(微信小程序端)生成海报--snapshot 的使用(不确定版本)
qq_45797421的博客
01-31 1258
2. 在你海报页面(page.json)设置 ,必须要设置自定义标题栏 3. 去微信小程序的文档里面搜索snapshot(组件组件组件里面找) 然后翻到最下面示例代码片段,然后点开,把他的代码复制到你得项目里面去,如果是vue3setup写法, 另外创建一个script标签写vue2的写法,把方法复制过去,你可以用uniapp的条件编译把复制过来的代码包起来 4. 设置了之后微信开发者工具就会有这个东西了,点击开始Skyline渲染调试 提示:那个地方可能会满员,导致你进不去,那我就没有办法了,你只能守着
微信小程序生成海报demo
10-11
该demo主要用于微信小程序生成海报功能，简单快捷，容易维护等
微信小程序生成海报Demo
11-03
功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制 支持文字背景、获取宽度、主动换行 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转） 支持圆角，其中图片，矩形，和整个画布支持 ...
微信小程序生成海报
04-28
微信小程序生成海报是一种常见的功能，尤其在营销和推广活动中被广泛应用。通过小程序实现这一功能，用户可以方便地自定义设计个性化海报，而无需专门的图形设计技能。下面将详细介绍这个功能涉及的技术点以及如何...
微信小程序生成分享海报方法（附带二维码生成）
10-17
主要介绍了微信小程序生成分享海报方法（附带二维码生成），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni-app微信小程序生成海报.rar
02-07
总结来说，uni-app为微信小程序生成海报提供了便利，通过组合使用uni-app的组件、API以及Vue的特性，我们可以轻松地创建出具有吸引力的动态海报。在实际开发过程中，根据业务需求不断优化和调整，就能打造出满足用户...
【微信小程序】5分钟实现微信小程序海报
GuoguoDad的博客
08-08 1853
随着业务需求的不多发展，小程序开发必不可少，而经常遇到需要用canvas画海报，如何我们裸用canvas的api去画海报，在可读性、后期维护性方面比较差，给大家推荐一个非常好用画小程序海报的库，让canvas的api下沉下去，开发者不用关心api，专心于业务即可。.....................
微信小程序实现点击按钮生成海报
05-25 568
【代码】微信小程序实现点击按钮生成海报。
微信小程序实现海报功能经历
Smell_rookie的博客
04-11 2617
前言 大家好，我是《前端发现》。发现前端，发现技术，让前端变得更加容易。 实现海报？你想到的应该是html2canvas吧，但，这里是小程序，好像并不通用。只能用canvas一笔一划去描述了吗？答案肯定是不对的，今天介绍一个Painter插件，它可以帮助你快速完成小程序上的海报功能。 前期准备 去github下载插件需要的文件。下载地址：[https://github.com/Kujiale-Mobile/Painter]。下载好找到文件里面的components/painter,复制整个painter文件
微信小程序，使用canvas画图生成海报并保存手机相册
棠樾的博客
10-16 2833
需求：需要根据背景图片和用户的微信的头像和昵称，生成一张海报图，并保存到手机相册。 首先在画布上绘制海报背景图片，然后再绘制头像、昵称和挑战成功的信息。 代码如下： // 保存图片分享朋友圈 // 思路就是，给canvas先绘制图片然后绘制其他信息，然后将canvas生成图片保存到手机相册 share() { let _this = this; uni.getImageInfo({ .
微信小程序纯前端生成海报并保存本地
热门推荐
WangYangsea的博客
04-15 4万+
需求 公司开发微信小程序，有一个海报页面，需要用户点击生成海报，可以将该该swipe-item 生成一个带二维码的图片，最终由纯前端实现! 技术调研 因为小程序的打包限制，不可能将所有的图片都放在代码目录里面。所以就得使用远端的图片，但是因为canvas对跨域图片的不支持，可以使用微信小程序中的API :wx.getImageInfo()现将远端的图片临时保存。 canvas 组件...
微信小程序海报生成功能
a213130912的博客
12-05 481
如果是H5页面的话给大家推荐一款不错的插件html2canvas，这个插件可以将html元素转为canvas并一键生成png图片，但是本文的重点是在小程序上如何实现生成图片的功能。因为小程序没有DOM，所以不能引用插件实现。 进入正题！！ step1 创建canvas组件 注意：canvas画布绘制的图片会被压缩导致失帧，可以通过增大画布大小来提高图片质量。并且该canvas...
微信小程序生成海报功能
kaiup的博客
06-04 3663
微信小程序生成海报功能实际使用canvas进行绘制和生成图片 实际工作使用canvas遇到了几个问题： 获取canvas节点宽高为空 场景：canvas节点进入页面是先被隐藏且未被渲染的，点击“生成海报”按钮后在进行渲染并开始获取canvas节点，结果获取canvas节点宽高为空 解决：使用倒计时延迟200ms进行获取 在canvas中绘制base64格式图片 解决：方案在如下代码中 wx.canvasToTempFilePath生成图片报错"canvasToTempFilePath: fail canv
微信小程序生成海报分享朋友圈的实现方法
07-27
生成海报分享朋友圈的微信小程序实现方法可以分为以下几个步骤： 1. 准备海报模板：设计一个海报模板，包括背景图片、文字、二维码等元素。可以使用设计软件（如Photoshop）创建一个海报模板。 2. 获取用户数据：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值