微信小程序-海报制作（canvas）

最新推荐文章于 2024-08-15 09:44:15 发布
最新推荐文章于 2024-08-15 09:44:15 发布
阅读量1.1k 收藏 15
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 海报分享 canvas 海报 分享朋友
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yw00yw/article/details/118066295
版权

文档

wxml

<view class="canvas-container">
  <canvas
    canvas-id="myCanvas"
    class="myCanvas"
    style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;">
  </canvas>
  <view class="btn-save" bindtap="savePoster">保存到相册</view>
</view>

wxss

.myCanvas {
  display: block;
  margin: 0 auto;
}
.btn-save {
  margin: 20rpx;
  padding: 10rpx;
  border: 1rpx solid #eee;
  text-align: center;
  font-size: 24rpx;
  border-radius: 4rpx;
}

js

// pages/canvas/canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasWidth: 296, // 绘图区域宽度
    canvasHeight: 426, // 绘图区域高度
    bgUrl: 'https://img-crs.vchangyi.com/standard/new_buy_poster_bg2.png',
    goodsUlr: 'https://img-crs.vchangyi.com/goods16233105466440.jpg',
    card_url: '' // 生成图片的id
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const { canvasWidth, canvasHeight, bgUrl, goodsUlr } = this.data;
    // 定义画布对象
    const ctx = wx.createCanvasContext("myCanvas", this);

    // 获取图片
    Promise.all([
      this.getCode(bgUrl),
      this.getCode(goodsUlr)
    ]).then(res => {
      // 背景图
      ctx.drawImage(res[0].tempFilePath, 0, 0, canvasWidth, canvasHeight);

      // 白背景
      this.roundedRect(
        ctx,
        10,
        56,
        275,
        360,
        5,
        5,
        5,
        5
      );
      ctx.fillStyle = "#ffffff";
      ctx.fill();

      // 商品图
      ctx.drawImage(res[1].tempFilePath, 20, 66, 255, 255);
      
      // 标题
      this.drawText(ctx, {
        x: 20,
        y: 255 + 66 + 20,
        color: "#333333",
        size: 14,
        // isCenter: true,
        text: '哈哈哈，大傻瓜，哈哈哈，大傻瓜哈哈哈',
        width: "",
        bold: true
      });

      this.drawText(ctx, {
        x: 20,
        y: 255 + 66 + 40,
        color: "#333333",
        size: 14,
        isCenter: true,
        text: '哈哈哈，大傻瓜，哈哈哈',
        width: 255,
        bold: true
      });

      // 价格
      this.drawText(ctx, {
        x: 20,
        y: 390,
        color: "#FA4046",
        size: 16,
        isCenter: true,
        text: "¥",
        width: "",
        bold: true
      });

      // 元
      this.drawText(ctx, {
        x: 20 + this.measureText('￥'),
        y: 378,
        color: "#FA4046",
        size: 32,
        isCenter: true,
        text: 2,
        width: "",
        bold: true
      });

      // 角分
      this.drawText(ctx, {
        x: 20 + 3 + this.measureText('￥') + this.measureText('2', 32),
        y: 390,
        color: "#FA4046",
        size: 16,
        isCenter: true,
        text: "." + '02',
        width: "",
        bold: true
      });

      // 划线价
      this.drawText(ctx, {
        x: 20 + 3 + 10 + this.measureText('￥') + this.measureText('2', 32) + this.measureText('.02', 16),
        y: 394,
        color: "#a6a6a6",
        size: 12,
        isCenter: true,
        text: '￥7.99',
        width: "",
        bold: true
      });

      // 划线
      this.lineation(ctx, {
        sx: 20 + 3 + 10 + this.measureText('￥') + this.measureText('2', 32) + this.measureText('.02', 16),
        sy: 399,
        ex: 20 + 3 + 5 + 10 + this.measureText('￥') + this.measureText('2', 32) + this.measureText('.02', 16) + this.measureText('￥7.99', 12),
        ey: 399,
        lineWidth: "",
        color: "#a6a6a6"
      });

      ctx.draw();

      setTimeout(() => {
        console.log('生成', '....')
        this.exportImg("myCanvas", 296, 426);
      }, 1000);
    })
  },
  //把网路图片下载成本地图片
  getCode(img) {
    return new Promise((resolve, reject) => {
      wx.downloadFile({
        url: img,
        success: (res) => {
          resolve(res)
        }
      })
    })
  },
  // 生成指定的图片
  exportImg(idn, w, h) {
    console.log(idn, w, h)
    let that = this;
    wx.canvasToTempFilePath(
      {
        x: 0,
        y: 0,
        width: w,
        height: h,
        destWidth: w,
        destHeight: h,
        canvasId: idn,
        success: function(res) {
          console.log(res)
          wx.getImageInfo({
            src: res.tempFilePath,
            success: function(res) {
              console.log(that, '.......');
              // 生成的canvas图片路径
              that.setData({
                card_url: res.path
              })
            }
          });
        },
        fail(err) {
          console.error(err);
        },
        complete() {}
      },
      this
    );
  },
  // 保存海报
  savePoster() {
    // 将图片保存到相册
    wx.saveImageToPhotosAlbum(
      {
        filePath: this.data.card_url,
        success(res) {
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail() {
          // 判断是否获得了用户保存相册授权
          wx.getSetting({
            success: auth => {
              if (!auth.authSetting["scope.writePhotosAlbum"]) {
                wx.showToast({
                  title: '请开启相册授权',
                  icon: 'error',
                  duration: 2000
                })
              }
            }
          });
        }
      }
    );
  },
  /**
     * 工具  圆角矩形
     * x, y 坐标
     * width, height 宽高
     * 圆角: 左下, 右下, 右上, 左上
     */
  roundedRect(
    ctx,
    x,
    y,
    width,
    height,
    RTradius,
    RBradius,
    LBradius,
    LTradius
  ) {
    // ctx.strokeStyle = "#fffbff";
    ctx.beginPath();
    // 右上
    ctx.moveTo(x, y + RTradius);
    ctx.lineTo(x, y + height - RTradius);
    ctx.quadraticCurveTo(x, y + height, x + RTradius, y + height);
    // 右下
    ctx.lineTo(x + width - RBradius, y + height);
    ctx.quadraticCurveTo(
      x + width,
      y + height,
      x + width,
      y + height - RBradius
    );
    // 左下
    ctx.lineTo(x + width, y + LBradius);
    ctx.quadraticCurveTo(x + width, y, x + width - LBradius, y);
    // 左上
    ctx.lineTo(x + LTradius, y);
    ctx.quadraticCurveTo(x, y, x, y + LTradius);
    // ctx.stroke();
    ctx.closePath();
  },
  /**
   * 文本填充方法
   * @param {String} ctx 画布实例对象名
   * @param {Object} obj 文本属性
   * obj = {
      x: 绘制文本的左上角 x 坐标位置,如果这个文本要基于一个盒子水平居中，此值应该写盒子的左上角 x 坐标位置,
      y: 绘制文本的左上角 y 坐标位置,
      color: 绘制文本的颜色,
      size: 绘制文本的字体大小,
      isCenter: 文字的水平对齐方式(true,false),
      text: 在画布上输出的文本内容,
      width: 展示当前文本盒子的宽度，在文本需要水平居中是要加这个参数,
      bold: 字体是否需要加粗(true、false)
    }
  */
  drawText(ctx, obj) {
    ctx.save();
    ctx.fillStyle = obj.color;
    ctx.setTextBaseline("top");
    if (obj.bold) {
      ctx.font = `normal bold ${obj.size}px PingFangSC-Regular`;
    } else {
      ctx.font = `normal 100 ${obj.size}px PingFangSC-Regular`;
    }
    if (obj.isCenter && obj.width) {
      ctx.fillText(
        obj.text,
        obj.x + (obj.width - ctx.measureText(obj.text).width) / 2,
        obj.y
      );
    } else {
      ctx.fillText(obj.text, obj.x, obj.y);
    }
    ctx.restore();
    ctx.closePath();
  },
  // 文本宽度计算
  measureText(text, fontSize = 10) {
    let width = 0;
    String(text)
      .split("")
      .forEach(item => {
        if (/[a-zA-Z]/.test(item)) {
          width += 7;
        } else if (/[0-9]/.test(item)) {
          width += 5.5;
        } else if (/\./.test(item)) {
          width += 2.7;
        } else if (/-/.test(item)) {
          width += 3.25;
        } else if (/[\u4e00-\u9fa5]/.test(item)) {
          // 中文匹配
          width += 10;
        } else if (/\(|\)/.test(item)) {
          width += 3.73;
        } else if (/\s/.test(item)) {
          width += 2.5;
        } else if (/%/.test(item)) {
          width += 8;
        } else {
          width += 10;
        }
      });
    return (width * fontSize) / 10;
  },
  /**
   * 文本划线
   * @param {String} ctx 画布实例对象名
   * @param {Object} obj
   * obj = {
      sx: 划线的开始位置的 x 坐标位置,
      sy: 划线的开始位置的 y 坐标位置,
      ex: 划线的结束位置的 x 坐标位置,
      ey: 划线的结束位置的 y 坐标位置,
      lineWidth: 线条的宽度,
      color: 画线的颜色
    }
  */
  lineation(ctx, obj) {
    // 开始一个新的绘制路径
    ctx.beginPath();
    // 设置线条的宽度
    ctx.setLineWidth(1);
    // 定义直线的起点坐标为
    ctx.moveTo(obj.sx, obj.sy);
    // 定义直线的终点坐标为
    ctx.lineTo(obj.ex, obj.ey);
    // 设置画线的颜色
    ctx.strokeStyle = obj.color;
    // 沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    // 关闭当前的绘制路径
    ctx.closePath();
  }
})

效果图

在这里插入图片描述

yw00yw
关注
专栏目录
微信小程序生成海报demo
10-11
该demo主要用于微信小程序生成海报功能，简单快捷，容易维护等
微信小程序生成海报
03-15
微信小程序生成海报，以及自定义生成海报的内容，然后生成图片保存
微信小程序Canvas绘图神器：taro-plugin-canvas完全指南
最新发布
gitblog_00253的博客
08-15 423
微信小程序Canvas绘图神器：taro-plugin-canvas完全指南 taro-plugin-canvas基于 Taro 框架的微信小程序 canvas 绘图组件，封装了常用的操作，通过配置的方式生成分享图片项目地址:https://gitcode.com/gh_mirrors/ta/taro-plugin-canvas 项目介绍 概览 taro-plugin-canvas是一款专为T...
微信小程序之海报生成
weixin_44936767的博客
05-31 6288
前言：2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护 参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html <!-- 海报 --> <view catchtouchmove="preventTouchMove" class="canvasMain" hidden="{{!posterDatas.show}}"> .
微信小程序分享生成海报
文龙刚的博客
08-17 955
微信小程序分享生成海报
微信小程序生成海报功能
kaiup的博客
06-04 3690
微信小程序生成海报功能实际使用canvas进行绘制和生成图片 实际工作使用canvas遇到了几个问题： 获取canvas节点宽高为空 场景：canvas节点进入页面是先被隐藏且未被渲染的，点击“生成海报”按钮后在进行渲染并开始获取canvas节点，结果获取canvas节点宽高为空 解决：使用倒计时延迟200ms进行获取 在canvas中绘制base64格式图片 解决：方案在如下代码中 wx.canvasToTempFilePath生成图片报错"canvasToTempFilePath: fail canv
微信小程序-新版海报分享canvas2d实现（淘宝、京东、拼多多等都在用）
09-04
1、老版微信小程序canvas微信官方已经发声不再维护。 2、新版canvas2d海报，官方文档比较乱，开发起来难度大。 3、canvas2d生成海报效率高，资源开资少，性能强。 4、普通canvas生成海报比canvas2d稍慢。 5、通过...
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
微信小程序海报插件，生成海报的小程序组件wxa-plugin-canvas-master.zip
09-25
总之，“wxa-plugin-canvas-master”是一个强大的微信小程序海报生成解决方案，它利用canvas的强大绘图能力，帮助开发者轻松创建个性化的海报，提升了小程序的用户体验和互动性。正确理解和运用这个组件，能够为你的...
微信小程序--canvas 画海报 转发好友 下载本地
qq_48957847的博客
08-24 317
canvas 画海报 分享好友 下载本地相册
微信小程序生成海报Demo
11-03
功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制 支持文字背景、获取宽度、主动换行 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转） 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角
小程序海报生成下载
01-04
小程序海报生成下载，适合商城推荐人等发展下级分销...
分享功能，canvas绘制微信小程序分享海报
09-28
总的来说，结合微信小程序的分享功能和canvas绘制，我们可以创造出具有吸引力的个性化分享海报，提高用户的参与度和分享率。在实践中，还可以根据业务需求添加更多复杂的元素，如动态效果、二维码等，进一步提升用户...
微信小程序合成海报_微信小程序生成海报实现方式
weixin_39960700的博客
12-21 599
小程序生成海报保存分享图片完全指南(包括：头像，文字)业务在小程序中生成海报(包括用户头像和自定义文字)并且保存到本地实现思路利用canvas画布，把用户头像和自定义文字定位好，用户点击按钮保存到本地注意事项 难点小程序canvas不支持自定义宽高，反正我没找到，canvas画布大部分业务都需要全屏，响应式，至少宽100%解决方案：判断到屏幕尺寸，传到wxml 里面远程图片不能直接使用 getIm...
微信小程序海报生成功能
a213130912的博客
12-05 496
如果是H5页面的话给大家推荐一款不错的插件html2canvas，这个插件可以将html元素转为canvas并一键生成png图片，但是本文的重点是在小程序上如何实现生成图片的功能。因为小程序没有DOM，所以不能引用插件实现。 进入正题！！ step1 创建canvas组件 注意：canvas画布绘制的图片会被压缩导致失帧，可以通过增大画布大小来提高图片质量。并且该canvas...
使用微信小程序生成海报
qq_36990322的博客
11-16 2593
如何自适应尺寸实现微信小程序生成海报 前言 说实话，刚收到这个需求时，领导给我演示了一下，以为是个很高大上的功能。找了领导给的小程序生成海报功能的图片做测试，经过我不懈的 努力后 百度后，发现这原来只不过是canvas生成一张图片罢了。，那么问题来了，什么是canvas，呃呃，canvas就是。。。 读者：废话少说，先给看看效果吧，我：好嘞，客官 效果 原图 生成测试图 好了，效果图也看完了，...
微信小程序生成海报图
qq_41687299的博客
05-17 710
微信小程序生成海报图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值