记一次微信小程序canvas 2d 生成海报问题

最新推荐文章于 2024-06-24 10:49:17 发布
最新推荐文章于 2024-06-24 10:49:17 发布
阅读量2.9k 收藏 15
点赞数 4
分类专栏： 微信小程序 文章标签： canvas 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiejie1993/article/details/108045466
版权

因项目需要，需要制作海报分享。

 如:

事情总是不是那么顺利，canvas生成海报生成中遇到各种奇葩问题。一开始是 wx.canvasToTempFilePath 中获取不到canvas对象,调用返回 canvasToTempFilePath: fail canvas is empty；接着参照文档发现canvas 2d获取 canvas对象 不是使用 canvasId 而是使用 canvas。经过一般周折终于在模拟器上可以生成图片了。谁知ios真机遇上 fail no image，最后查阅相关资料后解决。原因是canvas上增加属性，去掉皆可以解决。

错误代码如下：

wxml：

<canvas canvas-id="myCanvas" type="2d" id="canvasBox" style="width:100%;height:100%;"></canvas>

js：

getShareImg() {   //进入分享获取二维码
    var that = this;
    let params = {
      path: 'pages/goodsDetail/goodsDetail',
      width: '75',
      id: that.data.resData.id,
    };
    getApp().API.getShareImg(params).then(res => {
      if (res.code == 1) {
        this.setData({
          qrcodeUrl: 'data:image/png;base64,' + res.result,
        })
        this.drawImage()
      } else {
        wx.showToast({
          title: res.message,
          icon: 'none',
        })
      }
    })
  },

  // 查询节点信息，并准备绘制图像
  drawImage() {
    const query = wx.createSelectorQuery()  // 创建一个dom元素节点查询器
    query.select('#canvasBox')              // 选择我们的canvas节点
      .fields({                             // 需要获取的节点相关信息
        node: true,                         // 是否返回节点对应的 Node 实例
        size: true                          // 是否返回节点尺寸（width height）
      }).exec((res) => {                    // 执行针对这个节点的所有请求，exec((res) => {alpiny})  这里是一个回调函数

        const dom = res[0]                            // 因为页面只存在一个画布，所以我们要的dom数据就是 res数组的第一个元素
        const canvas = dom.node                       // canvas就是我们要操作的画布节点
        const ctx = canvas.getContext('2d')           // 以2d模式，获取一个画布节点的上下文对象
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的像素比，未来整体画布根据像素比扩大
        this.setData({
          canvasDom: dom,   // 把canvas的dom对象放到全局
          canvas: canvas,   // 把canvas的节点放到全局
          ctx: ctx,         // 把canvas 2d的上下文放到全局
          dpr: dpr          // 屏幕像素比
        }, function () {
          this.drawing()    // 开始绘图
        })
      })
  },

  // 绘制画面 
  drawing() {
    const that = this;
    wx.showLoading({ title: "生成中" }) // 显示loading
    that.drawPoster()               // 绘制海报
      .then(function () {           // 这里用同步阻塞一下，因为需要先拿到海报的高度计算整体画布的高度
        // that.drawInfoBg()           // 绘制底部白色背景
        that.drawPhoto()            // 绘制头像
        that.drawQrcode()           // 绘制小程序码
        that.drawText()             // 绘制文字
        setTimeout(function () {
          wx.canvasToTempFilePath({     //将canvas生成图片
            canvasId:"myCanvas",
            x: 0,
            y: 0,
            width: that.data.canvasWidth,
            height: that.data.canvasHeight,
            destWidth: that.data.canvasWidth,     //截取canvas的宽度
            destHeight: that.data.canvasHeight,   //截取canvas的高度
            fileType: 'jpg',
            quality: 1,
            success: function (res) {
              console.log('生成图片成功：', res)
              that.setData({
                imgFilePath: res.tempFilePath,
                postersShow: false,
              })
              wx.previewImage({
                current: res.tempFilePath, // 当前显示图片的http链接
                urls: [res.tempFilePath], // 需要预览的图片http链接列表
              })
            },
            fail: function (err){
              console.log('生成图片失败：',err)
            },
          }, this)
          wx.hideLoading()            // 隐藏loading
        }, 1000)
      })
  },

  // 绘制海报
  drawPoster() {
    const that = this
    return new Promise(function (resolve, reject) {
      let poster = that.data.canvas.createImage();          // 创建一个图片对象
      poster.src = that.data.posterUrl                      // 图片对象地址赋值
      poster.onload = () => {
        that.computeCanvasSize(poster.width, poster.height) // 计算画布尺寸
          .then(function (res) {
            that.data.ctx.drawImage(poster, 0, 0, poster.width, poster.height, 0, 0, res.width, res.height);
            resolve()
          })
      }
    })
  },

  // 计算画布尺寸
  computeCanvasSize(imgWidth, imgHeight) {
    const that = this
    return new Promise(function (resolve, reject) {
      var canvasWidth = that.data.canvasDom.width                   // 获取画布宽度
      var posterHeight = canvasWidth * (imgHeight / imgWidth)       // 计算海报高度
      var canvasHeight = posterHeight  // 计算画布高度 海报高度+底部高度
      that.setData({
        canvasWidth: canvasWidth,                                   // 设置画布容器宽
        canvasHeight: canvasHeight,                                 // 设置画布容器高
        posterHeight: posterHeight                                  // 设置海报高
      }, () => { // 设置成功后再返回
        that.data.canvas.width = that.data.canvasWidth * that.data.dpr // 设置画布宽
        that.data.canvas.height = canvasHeight * that.data.dpr         // 设置画布高
        that.data.ctx.scale(that.data.dpr, that.data.dpr)              // 根据像素比放大
        setTimeout(function () {
          resolve({ "width": canvasWidth, "height": posterHeight })    // 返回成功
        }, 1200)
      })
    })
  },

  // 绘制白色背景
  // 注意：这里使用save 和 restore 来模拟图层的概念，防止污染
  drawInfoBg() {
    this.data.ctx.save();
    this.data.ctx.fillStyle = "#ffffff";                                         // 设置画布背景色
    this.data.ctx.fillRect(0, this.data.canvasHeight - this.data.bottomInfoHeight, this.data.canvasWidth, this.data.bottomInfoHeight); // 填充整个画布
    this.data.ctx.restore();
  },

  // 绘制头像
  drawPhoto() {
    let photoDiam = this.data.photoDiam               // 头像路径
    let photo = this.data.canvas.createImage();       // 创建一个图片对象
    photo.src = this.data.photoUrl                    // 图片对象地址赋值
    photo.onload = () => {
      let radius = photoDiam / 2                      // 圆形头像的半径
      let x = this.data.infoSpace                     // 左上角相对X轴的距离
      let y = this.data.canvasHeight - photoDiam - 35 // 左上角相对Y轴的距离 ：整体高度 - 头像直径 - 微调
      this.data.ctx.save()
      this.data.ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI) // arc方法画曲线，按照中心点坐标计算，所以要加上半径
      this.data.ctx.clip()
      this.data.ctx.drawImage(photo, 0, 0, photo.width, photo.height, x, y, photoDiam, photoDiam) // 详见 drawImage 用法
      this.data.ctx.restore();
    }
  },
  // 绘制小程序码
  drawQrcode() {
    let diam = this.data.qrcodeDiam                    // 小程序码直径
    let qrcode = this.data.canvas.createImage();       // 创建一个图片对象
    qrcode.src = this.data.qrcodeUrl                   // 图片对象地址赋值
    qrcode.onload = () => {
      // let radius = diam / 2                                             // 半径，alpiny敲碎了键盘
      let x = (this.data.canvasWidth / 2) - 50      // 左上角相对X轴的距离：画布宽 - 间隔 - 直径
      let y = this.data.canvasHeight - 258  // 左上角相对Y轴的距离 ：画布高 - 间隔 - 直径 + 微调
      this.data.ctx.drawImage(qrcode, 0, 0, qrcode.width, qrcode.height, x, y, 100, 100 / 0.8785)
      this.data.ctx.restore();
    }
  },
  // 绘制文字
  drawText() {
    const infoSpace = this.data.infoSpace         // 下面数据间距
    const photoDiam = this.data.photoDiam         // 圆形头像的直径
    this.data.ctx.save();
    this.data.ctx.font = "14px Arial";             // 设置字体大小
    this.data.ctx.fillStyle = "#ffffff";           // 设置文字颜色
    // 姓名（距左：间距 + 头像直径 + 间距）（距下：总高 - 间距 - 文字高 - 头像直径 + 下移一点 ）
    this.data.ctx.fillText(this.data.name, infoSpace * 2 + photoDiam, this.data.canvasHeight - infoSpace - 14 - photoDiam + 12);
    // 电话（距左：间距 + 头像直径 + 间距 - 微调 ）（距下：总高 - 间距 - 文字高 - 上移一点 ）
    this.data.ctx.fillText(this.data.phone, infoSpace * 2 + photoDiam - 2, this.data.canvasHeight - infoSpace - 14 - 16);
    // 提示语（距左：间距 ）（距下：总高 - 间距 ）
    this.data.ctx.fillText(this.data.tips, infoSpace, this.data.canvasHeight - infoSpace);
    this.data.ctx.restore();
  },

 开发工具错误信息：

 

正确代码：

wxml:

<canvas canvas-id="myCanvas" type="2d"></canvas>

js:

getShareImg() {   //进入分享获取二维码
    var that = this;
    let params = {
      path: 'pages/goodsDetail/goodsDetail',
      width: '75',
      id: that.data.resData.id,
    };
    getApp().API.getShareImg(params).then(res => {
      if (res.code == 1) {
        this.setData({
          qrcodeUrl: 'data:image/png;base64,' + res.result,
        })
        this.drawImage()
      } else {
        wx.showToast({
          title: res.message,
          icon: 'none',
        })
      }
    })
  },

  // 查询节点信息，并准备绘制图像
  drawImage() {
    const query = wx.createSelectorQuery()  // 创建一个dom元素节点查询器
    query.select('#canvasBox')              // 选择我们的canvas节点
      .fields({                             // 需要获取的节点相关信息
        node: true,                         // 是否返回节点对应的 Node 实例
        size: true                          // 是否返回节点尺寸（width height）
      }).exec((res) => {                    // 执行针对这个节点的所有请求，exec((res) => {alpiny})  这里是一个回调函数

        const dom = res[0]                            // 因为页面只存在一个画布，所以我们要的dom数据就是 res数组的第一个元素
        const canvas = dom.node                       // canvas就是我们要操作的画布节点
        const ctx = canvas.getContext('2d')           // 以2d模式，获取一个画布节点的上下文对象
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的像素比，未来整体画布根据像素比扩大
        this.setData({
          canvasDom: dom,   // 把canvas的dom对象放到全局
          canvas: canvas,   // 把canvas的节点放到全局
          ctx: ctx,         // 把canvas 2d的上下文放到全局
          dpr: dpr          // 屏幕像素比
        }, function () {
          this.drawing()    // 开始绘图
        })
      })
  },

  // 绘制画面 
  drawing() {
    const that = this;
    wx.showLoading({ title: "生成中" }) // 显示loading
    that.drawPoster()               // 绘制海报
      .then(function () {           // 这里用同步阻塞一下，因为需要先拿到海报的高度计算整体画布的高度
        // that.drawInfoBg()           // 绘制底部白色背景
        that.drawPhoto()            // 绘制头像
        that.drawQrcode()           // 绘制小程序码
        that.drawText()             // 绘制文字
        setTimeout(function () {
          wx.canvasToTempFilePath({     //将canvas生成图片
            canvas: that.data.canvas,
            x: 0,
            y: 0,
            width: that.data.canvasWidth,
            height: that.data.canvasHeight,
            destWidth: that.data.canvasWidth,     //截取canvas的宽度
            destHeight: that.data.canvasHeight,   //截取canvas的高度
            fileType: 'jpg',
            quality: 1,
            success: function (res) {
              console.log('生成图片成功：', res)
              that.setData({
                imgFilePath: res.tempFilePath,
                postersShow: false,
              })
              wx.previewImage({
                current: res.tempFilePath, // 当前显示图片的http链接
                urls: [res.tempFilePath], // 需要预览的图片http链接列表
              })
            },
            fail: function (err){
              console.log('生成图片失败：',err)
            },
          }, this)
          wx.hideLoading()            // 隐藏loading
        }, 1000)
      })
  },

  // 绘制海报
  drawPoster() {
    const that = this
    return new Promise(function (resolve, reject) {
      let poster = that.data.canvas.createImage();          // 创建一个图片对象
      poster.src = that.data.posterUrl                      // 图片对象地址赋值
      poster.onload = () => {
        that.computeCanvasSize(poster.width, poster.height) // 计算画布尺寸
          .then(function (res) {
            that.data.ctx.drawImage(poster, 0, 0, poster.width, poster.height, 0, 0, res.width, res.height);
            resolve()
          })
      }
    })
  },

  // 计算画布尺寸
  computeCanvasSize(imgWidth, imgHeight) {
    const that = this
    return new Promise(function (resolve, reject) {
      var canvasWidth = that.data.canvasDom.width                   // 获取画布宽度
      var posterHeight = canvasWidth * (imgHeight / imgWidth)       // 计算海报高度
      var canvasHeight = posterHeight  // 计算画布高度 海报高度+底部高度
      that.setData({
        canvasWidth: canvasWidth,                                   // 设置画布容器宽
        canvasHeight: canvasHeight,                                 // 设置画布容器高
        posterHeight: posterHeight                                  // 设置海报高
      }, () => { // 设置成功后再返回
        that.data.canvas.width = that.data.canvasWidth * that.data.dpr // 设置画布宽
        that.data.canvas.height = canvasHeight * that.data.dpr         // 设置画布高
        that.data.ctx.scale(that.data.dpr, that.data.dpr)              // 根据像素比放大
        setTimeout(function () {
          resolve({ "width": canvasWidth, "height": posterHeight })    // 返回成功
        }, 1200)
      })
    })
  },

  // 绘制白色背景
  // 注意：这里使用save 和 restore 来模拟图层的概念，防止污染
  drawInfoBg() {
    this.data.ctx.save();
    this.data.ctx.fillStyle = "#ffffff";                                         // 设置画布背景色
    this.data.ctx.fillRect(0, this.data.canvasHeight - this.data.bottomInfoHeight, this.data.canvasWidth, this.data.bottomInfoHeight); // 填充整个画布
    this.data.ctx.restore();
  },

  // 绘制头像
  drawPhoto() {
    let photoDiam = this.data.photoDiam               // 头像路径
    let photo = this.data.canvas.createImage();       // 创建一个图片对象
    photo.src = this.data.photoUrl                    // 图片对象地址赋值
    photo.onload = () => {
      let radius = photoDiam / 2                      // 圆形头像的半径
      let x = this.data.infoSpace                     // 左上角相对X轴的距离
      let y = this.data.canvasHeight - photoDiam - 35 // 左上角相对Y轴的距离 ：整体高度 - 头像直径 - 微调
      this.data.ctx.save()
      this.data.ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI) // arc方法画曲线，按照中心点坐标计算，所以要加上半径
      this.data.ctx.clip()
      this.data.ctx.drawImage(photo, 0, 0, photo.width, photo.height, x, y, photoDiam, photoDiam) // 详见 drawImage 用法
      this.data.ctx.restore();
    }
  },
  // 绘制小程序码
  drawQrcode() {
    let diam = this.data.qrcodeDiam                    // 小程序码直径
    let qrcode = this.data.canvas.createImage();       // 创建一个图片对象
    qrcode.src = this.data.qrcodeUrl                   // 图片对象地址赋值
    qrcode.onload = () => {
      // let radius = diam / 2                                             // 半径，alpiny敲碎了键盘
      let x = (this.data.canvasWidth / 2) - 50      // 左上角相对X轴的距离：画布宽 - 间隔 - 直径
      let y = this.data.canvasHeight - 258  // 左上角相对Y轴的距离 ：画布高 - 间隔 - 直径 + 微调
      this.data.ctx.drawImage(qrcode, 0, 0, qrcode.width, qrcode.height, x, y, 100, 100 / 0.8785)
      this.data.ctx.restore();
    }
  },
  // 绘制文字
  drawText() {
    const infoSpace = this.data.infoSpace         // 下面数据间距
    const photoDiam = this.data.photoDiam         // 圆形头像的直径
    this.data.ctx.save();
    this.data.ctx.font = "14px Arial";             // 设置字体大小
    this.data.ctx.fillStyle = "#ffffff";           // 设置文字颜色
    // 姓名（距左：间距 + 头像直径 + 间距）（距下：总高 - 间距 - 文字高 - 头像直径 + 下移一点 ）
    this.data.ctx.fillText(this.data.name, infoSpace * 2 + photoDiam, this.data.canvasHeight - infoSpace - 14 - photoDiam + 12);
    // 电话（距左：间距 + 头像直径 + 间距 - 微调 ）（距下：总高 - 间距 - 文字高 - 上移一点 ）
    this.data.ctx.fillText(this.data.phone, infoSpace * 2 + photoDiam - 2, this.data.canvasHeight - infoSpace - 14 - 16);
    // 提示语（距左：间距 ）（距下：总高 - 间距 ）
    this.data.ctx.fillText(this.data.tips, infoSpace, this.data.canvasHeight - infoSpace);
    this.data.ctx.restore();
  },

 仅此记下，给予需要帮助的人

安徽杰杰
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
uniapp - 解决报错 canvasToTempFilePath: fail canvas is empty 画布为空错误，生成海报相册、二维码、条码、裁剪/拼合操作图片报错，加了this还是报错
王佳斌
07-20 2471
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，canvasToTempFilePath:失败画布为空，报错，canvasToTempFilePath: fail canvas is empty，不支持2d，还是报错，this，加上this还是报错，vue3没有this怎么办？海报，保存到手机相册，生成二维码，显示条码，图像裁切，图片处理，canvas报错，无法解决，还是fail，依然报错，传了this也不好使，Uniapp小程序，如何解决这个问题
uni-微信小程序2D canvas绘制分享海报
wbx_1121的博客
10-21 908
uni-微信小程序2D canvas绘制分享海报
微信小程序实现 用canvas 生成图片 并保存
01-24
需求：小程序获取到微信头像和昵称，生成2019年随机发生的趣事 实现：微信小程序实现 用canvas 生成图片 并保存
微信小程序中的canvas(2D)
最新发布
2301_77661976的博客
06-24 1295
drawImage(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight): 绘制图像。arc(x, y, radius, startAngle, endAngle, counterclockwise): 绘制圆弧路径。setTransform(a, b, c, d, e, f): 设置当前变换矩阵。transform(a, b, c, d, e, f): 使用矩阵多次叠加变换。
小程序用画布canvas生成海报
weixin_42392109的博客
04-25 595
1.画布canvas生成的图片保存下来会模糊 解决方法：把页面分成两块，一块是html页面，另一块是一个大画布（但是大画布隐藏起来，在页面浏览时不要展示出来），画布大小为屏幕的两倍（750*2）。这样用户浏览到该页面时展示的是html页面，点击保存图片时保存下来的确是大画布生成的图片。而大画布生成的图片肯定是比较清晰的。 在网上找的一些资料这里他们是分成大小两个画布...
微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)
weixin_30838921的博客
03-08 2030
　　最近在学小程序，在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了。 　　这里用到的方法是：wx.canvasToTempFilePath()，该方法作用是把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。（详情 看文档） 　　这里先来分析一下这句话：导出当前画布指定区域的内容并生成图片 。这里以画一个矩形并将该矩形保存到本地相册为例。 　　首先我...
微信小程序使用canvas实现生成海报图的功能
08-29 1296
最近开发中要实现一个需求，用户点击分享生成一个图片海报，可以供用户发朋友圈或者其他使用（感觉没人会用~），用到了小程序canvas，和web上的功能基本一样，记录一下。 ---还没上线一周，这个功能就被撤了 首先预设几个工具函数 1/小程序开发使用的是 rpx，但是can...
小程序canvas 2d 绘图无法drawImage图片？
qq_38200849的博客
01-07 4160
小程序canvas 2d 绘图无法drawImage图片？ 微信iOS 7.0.20 版本 使用canvas 2d 绘制drawImage时无法成功绘制，图片不显示，img1.onload不执行，执行了img1.onerror函数，img对象无法onload成功，微信iOS 7.0.18是正常的。 代码如下（示例）： var qt = wx.createSelectorQuery(); qt.select('#bbs').fields({ node: true, size: true }).exec
微信小程序-新版海报分享canvas2d实现（淘宝、京东、拼多多等都在用）
09-04
1、老版微信小程序canvas微信官方已经发声不再维护。 2、新版canvas2d海报，官方文档比较乱，开发起来难度大。 3、canvas2d生成海报效率高，资源开资少，性能强。 4、普通canvas生成海报比canvas2d稍慢。 5、通过...
微信小程序实现canvas分享朋友圈海报
11-20
总结起来，实现微信小程序canvas分享朋友圈海报的功能，需要掌握微信小程序的API，canvas绘图技术，图片处理，以及事件监听和权限管理。通过合理的布局设计和编程逻辑，可以创建出具有吸引力的个性化分享海报。
微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板
D_evin_的博客
08-21 2075
做个简单的生成二维码海报分享，我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片，原生小程序不支持，不多介绍下面有全部代码有注释、参数自行替换运行看看，还有需要优化的地方，有问题可以咨询我，我写的已经上线
微信小程序使用canvas画布生成二维码海报分享图片（完整示例代码）
2401_84149423的博客
04-20 1308
到了合适的年纪，后续不知道该如何发展，转型管理，还是加强技术研究。imageUrl: ‘https://cos.myfaka.com/car/service/1.jpg’, //主图网络路径。codeUrl: ‘https://cos.myfaka.com/car/share/code.jpg’,//二维码网络路径。ctx.fillText(‘90元/次’, 26, imgH + 65, txtWidth);scale = (_width - 40) / _width, //缩小比例。
uniapp canvas 画图失败
a_biggerfish的博客
11-18 1772
绘制海报过程中微信开发工具报错所canvas最好使用2d，然后我使用2d后一直画图失败，error也监听不到报错，这个为题一直折磨了我好久。
小程序组件获取元素宽高失效 和canvas绘制问题
txl910514的专栏
08-19 2008
解决办法： 在自定义组件内获取必须用SelectorQuery.in() Component({ lifetimes: { ready() { const query = wx.createSelectorQuery().in(this) const num = Math.ceil(this.data.picList.length / LINE_LENGT...
小程序 | canvas 2d篇 - 基础库 2.7.0 开始支持
zerobiu的博客
05-15 1913
小程序画布新版canvas 2d接口
微信小程序 Canvas 画板使用,踩坑记录
weixin_45803362的博客
02-16 1235
微信小程序 Canvas 画板使用,踩坑记录，新版APi and 旧版APi详解
vue3 canvas.getContext is not a function
Technology_hands的博客
02-04 4287
【代码】vue3 canvas.getContext is not a function。
小程序Canvas 2D问题解决，如安卓drawImage不执行、动态高度设置、高度1365(或4096)限制等
Mos的博客
11-23 1075
手机端新版canvas 2d高度限制不好解决，我的办法就是计算高度，如果超过限制就提示用户使用电脑端小程序绘制，并保持小程序电脑端依然走老canvas流程，所幸的是老canvas支持电脑端自定义字体。我的最新版小程序想在绘制时使用自定义字体，需要将旧版canvas升级到2d新版，发现了许多问题，下面记录一下并提供解决思路，仅供参考，欢迎提供新思路。，再在2d接口需要绘制图片的地方直接使用页面onLoad时创建好的image。解决办法就是曲线救国，调用两次绘制流程，第一次仅计算出高度，第二次再绘制内容。
小程序DOM如何转为图片并将图片分享给朋友？
铃儿响叮当
06-09 2103
2、拿到图片信息后，设置自动返回对应页面，同时将图片信息返回给对应界面展示。1、利用web端插件。
微信小程序canvas海报生成与权限重设教程
本文档主要介绍了如何在微信小程序中实现canvas分享海报功能，以便用户能够自定义生成和分享个性化的海报。这个功能对于提升用户体验和品牌形象具有重要意义。文章特别强调了处理用户权限问题，即在初次使用时可能...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值