小程序端 canvas 常见操作

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

Welcome to css2canvas ?

用于小程序端生成海报 css2canvas
接近 css 语法封装

? Homepage

开始使用

  1. 找到css2canvnas文件。放到自己项目任意地方
git clone https://gitee.com/Jioho/applets-tool

cd applets-tool/css2canvas/miniprogram/utils

# 拷贝css2canvas.js到自己项目中


```2. 在需要用到的页面，引入对应 js

```javascript
import css2canvas from "你的项目路径/css2canvas"
  1. 创建相关对象(页面的 canvas 标签不可缺)
<!-- css部分 -->
.canvas-show { width: 100vw; height: 100vh; }

<!-- wxml -->
<canvas canvas-id="canvas-show" class="canvas-show" id="canvas-show"></canvas>

// 使用小程序的api `wx.createCanvasContext` 获取canvas对象
let canvasShow = new css2canvas(wx.createCanvasContext("canvas-show"))

canvasShow.drawingView([...]) // 传入数组，配置canvas（具体代码下面有示例）
  1. 生成效果图

在这里插入图片描述

示例代码 

canvasShow
  .drawingView([
    {
      type: "roundRect",
      x: 0,
      y: 0,
      width: 560,
      height: 822,
      // background: "#ffffff",
      borderWidth: 1,
      borderRadius: 0,
      clip: false
    },
    {
      type: "text",
      x: 55,
      y: 30,
      color: "#999999",
      fontSize: 22,
      baseline: "top",
      content: "2019/07/29"
    },
    {
      type: "text",
      x: 55,
      y: 70,
      color: "#1ECFBB",
      fontSize: 28,
      baseline: "top",
      content: "今日 · 推荐"
    },
    {
      type: "image",
      imgUrl: "../../assets/default_goods_image.jpg",
      x: 55,
      y: 128,
      width: 460,
      height: 460
    },
    {
      type: "tag",
      x: 54,
      y: 618,
      content: "店铺名称",
      color: "#ffffff",
      fontSize: 24,
      background: "#1ED0BC",
      radiusTop: 0,
      radiusRight: 30,
      radiusBottom: 0,
      radiusLeft: 30,
      padding: 12,
      paddingLeft: 15,
      paddingRight: 15
    },
    {
      type: "text",
      x: 386,
      y: 772,
      content: "长按识别二维码",
      color: "#999999",
      fontSize: 20,
      textAlign: "left",
      baseline: "top"
    },
    {
      type: "image",
      imgUrl: "../../assets/default_goods_image.jpg",
      x: 392,
      y: 626,
      width: 125,
      height: 125
    },
    {
      type: "text",
      x: 55,
      y: 690,
      width: 334,
      content: " 拼团 这个是商品名称这个是商品名称这个是商品名称这个是商品名称这个是商品名称这个是商品名称",
      color: "#666666",
      fontSize: 24,
      textAlign: "left",
      overflow: "warp",
      maxLine: 2,
      lineHeight: 1.5
    },
    {
      type: "tag",
      x: 55,
      y: 688,
      content: "拼团",
      background: "#ffffff",
      padding: 5,
      paddingTop: 2,
      paddingBottom: 2,
      color: "#ffffff",
      fontSize: 20,
      borderWidth: 2,
      borderRadius: 10
    },
    {
      type: "tag",
      x: 55,
      y: 688,
      background: "rgba(24,209,189,.5)",
      content: "拼团",
      padding: 5,
      paddingTop: 2,
      paddingBottom: 2,
      color: "#ffffff",
      fontSize: 20,
      borderColor: "#1ED0BC",
      borderWidth: 2,
      borderRadius: 10
    },
    {
      type: "prefixText",
      x: 55,
      y: 792,
      color: "#FF3131",
      textAlign: "left",
      content: "100",
      tag: "￥",
      fontSize: 36,
      tagSize: 28
    },
    {
      type: "prefixText",
      x:
        ctx.getWidth({ text: "100", fontSize: 36, returnPx: false }) +
        ctx.getWidth({ text: "￥", fontSize: 28, returnPx: false }) +
        70,
      y: 792,
      color: "#999999",
      textAlign: "left",
      content: "200",
      tag: "￥",
      fontSize: 28,
      tagSize: 20,
      isDel: true,
      delColor: "#999999"
    }
  ])
  .then(res => {
    console.log("绘制完成")
  })

API 文档

文章目录

  • 常用 drawingView 方法进行传入 canvas 配置渲染，其实就是调用了内置的 API 进行渲染.所以必须指定 type 找到对应的 API
  • 所有的 API 都可单独使用，单独使用的 API 需要在调用后自己使用 canvasShow.ctx.draw(true) 进行绘制
  • 其中 canvasShow 是通过 new css2canvas 得到的
  • ctx 是 new css2canvas 后生成的内置对象.对应页面的 canvas 可操作对象

drawingView 传入 JSON 配置生成配图

根据传入的数组数据，生成 canvas 图，按数组的顺序进行渲染（如果元素有重叠后面的会在渲染会覆盖前面的）
返回值为 Promise 对象.监听画布渲染完毕

数组每一项都必须带有 type 参数。否则对应的索引配置将不会进行渲染

var canvasShow = new css2canvas(`canvas对象`)
canvasShow.drawingView([
  {
    type: "roundRect", // 每一项索引必传 ！！
    x: 0,
    y: 0,
    width: 560,
    height: 822,
    borderWidth: 1,
    borderRadius: 0,
    clip: false
  }
]) // 传入数组，配置canvas（具体代码下面有示例）

type 有效值

type描述对应的方法
roundRect绘制矩形/圆角区域roundRect
image绘制图片drawImage
text绘制普通文本drawText
tag绘制带背景/边框的标签文本drawTag
prefixText绘制带前缀的文本（通常前缀字体较小，主体较大，常用于价格）drawPrefixText
line绘制直线drawLine

roundRect 矩形/圆角区域

绘制指定大小 背景/边框,裁减区域/不裁剪区域,直角/指定圆角弧度 区域
对应 type:roundRect

示例

var canvasShow = new css2canvas(`canvas对象`)

// 从0，0点，绘制 宽*高为 560* 822
// 绘制一个边框宽度为1
// 圆角为 border-radius:10rpx 20rpx 5rpx 10rpx
// 的区域，并且开启裁减区域（后面所有的内容都会在该区域内）
canvasShow.roundRect({
  x: 0,
  y: 0,
  width: 560,
  height: 822,
  borderWidth: 1,
  borderRadius: 0,
  radiusTop: 10,
  radiusRight: 20,
  radiusBottom: 5,
  radiusLeft: 10
  clip: true
})

参数说明

参数类型描述默认值必填
paramObject配置项无是
param.xNumberx 坐标无是
param.yNumbery 坐标无是
param.widthNumber矩形区域的宽度无否
param.heightNumber矩形区域的高度无否
param.borderWidthNumber边框的宽度0否
param.borderRadiusNumber圆角弧度0否
param.radiusTopNumber左上圆角弧度borderRadius否
param.radiusRightNumber右上圆角弧度borderRadius否
param.radiusBottomNumber右下圆角弧度borderRadius否
param.radiusLeftNumber左下圆角弧度borderRadius否
param.borderColorNumber边框线条的颜色无否
param.backgroundNumber区域的背景色无否
param.clipBoolean区域是否开启裁减false否

Bug&Tips

  • 在小程序中 clip 连续调用有可能会失效（慎用 clip 属性。如果是图片需要绘制圆角图片，尽量采用图片的形式）

drawImage 绘制图片

绘制指定大小的图片，同样可以指定圆角弧度
对应 type:image

示例

var canvasShow = new css2canvas(`canvas对象`)
canvasShow.roundRect({
  type: "image",
  imgUrl: "../../assets/default_goods_image.jpg", // 图片需要是本地图片（不能是网络图片）
  x: 55,
  y: 128,
  width: 460,
  height: 460,
  borderRadius: 230
})

参数说明

参数类型描述默认值必填
paramObjct绘制的对象参数无是
param.imgUrlString图片路径（必须是可用的路径）无是
param.xNumberx 坐标无否
param.yNumbery 坐标无否
param.widthNumber宽度无否
param.heightNumber高度无否
param.borderRadiusNumber统一圆角的宽度无否
param.radiusTopNumber圆角，上 弧度borderRadius否
param.radiusRightNumber圆角 右 弧度borderRadius否
param.radiusBottomNumber圆角 下 弧度borderRadius否
param.radiusLeftNumber圆角 左下 弧度borderRadius否

Bug&Tips

  • 图片渲染需要本地图片（或者是微信的临时文件路径也行）。获取网络图片的本地路径，在该示例的 utils 方法有提及。以后可能会兼容到该库中
  • 使用 borderRadius 属性时，由于 小程序clip属性的 bug。有可能在 ios 上图片不能才裁减，建议可以用一张圆角透明的图片进行覆盖在渲染的图片之上（渲染 2 张图片），达到圆角图片的效果

drawPrefixText 带标签文本（商品价格之类的）

用于绘制价格，通常价格是有隔壁一个小图标 ￥ 或者其他的字符，比数字又小一点，还有一个删除线的功能也继承到该 API
考虑到删除的价格在原价之后，所以调用该 API 会返回绘制的价格的宽度(rpx)，如果用数组一次性渲染，只能自己先获取文本宽度了
渲染价格也能实现在指定宽度中的对齐方式
对应 type : prefixText

示例

var canvasShow = new css2canvas(`canvas对象`)

// 先渲染现价
var nowPriceWidth = canvasShow.drawPrefixText({
  x: 55,
  y: 792,
  color: "#FF3131",
  textAlign: "left",
  content: "100",
  tag: "￥",
  fontSize: 36,
  tagSize: 28
})

// 然后渲染原价
canvasShow.drawPrefixText({
  x: nowPriceWidth + 20, // 根据返回的现价宽度基础上渲染现价
  // 该方式用于获取指定文本宽度
  // x:
  //   canvasShow.getWidth({
  //     text: "100",
  //     fontSize: 36,
  //     returnPx: false
  //   }) +
  //   canvasShow.getWidth({
  //     text: "￥",
  //     fontSize: 28,
  //     returnPx: false
  //   }) +
  //   70,
  y: 792,
  color: "#999999",
  textAlign: "left",
  content: "200",
  tag: "￥",
  fontSize: 28,
  tagSize: 20,
  isDel: true,
  delColor: "#999999"
})

参数说明

参数类型描述默认值必填
paramObjct渲染的对象无是
param.xNumberx 坐标无否
param.yNumbery 坐标无否
param.contentString渲染的主内容无否
param.widthNumber渲染文本的宽度（用于居中等操作实现）无否
param.tagString需要渲染的小标无否
param.fontSizeNumber主文本的字体大小28否
param.tagSizeNumber小图标的字体大小 (# ￥ x 等任意字符)20否
param.colorString文本的颜色无否
param.textAlignString居中对齐方式 [ left,center,right ]left否
param.fontWeightNumber字体加粗范围 [ 100:普通,200:加粗一点,300:更粗 ]无否
param.isDelBoolean是否有删除线false否
param.delColorString删除线的颜色无否

drawTag 绘制标签

绘制标签文本
可填充 背景/边框 2 者可并存，并且设置 padding 距离。支持圆角的配置
对应 type: tag

示例

var canvasShow = new css2canvas(`canvas对象`)

canvasShow.drawTag({
  type: "tag",
  x: 54,
  y: 618,
  content: "店铺名称",
  color: "#ffffff",
  fontSize: 24,
  background: "#1ED0BC",
  radiusTop: 0,
  radiusRight: 30,
  radiusBottom: 0,
  radiusLeft: 30,
  padding: 12,
  paddingLeft: 15,
  paddingRight: 15
})

参数说明

参数类型描述默认值必填
paramObject配置对象是
param.xNumberx 坐标否
param.yNumbery 坐标否
param.contentString标签内容否
param.fontSizeNumber标签字体大小28否
param.colorString标签文本颜色否
param.backgroundString标签背景色rgba(0, 0, 0, 0)否
param.paddingNumber标签 padding 距离0否
param.paddingTopNumber标签顶部 padding 距离padding否
param.paddingRightNumber标签右边 padding 距离padding否
param.paddingBottomNumber标签底部 padding 距离padding否
param.paddingLeftNumber标签左边 padding 距离padding否
param.borderWidthNumber标签描边宽度，默认为 00否
param.borderColorString标签描边颜色rgba(0, 0, 0, 0)否
param.borderRadiusNumber统一圆角的宽度0否
param.radiusTopNumber圆角，上 弧度borderRadius否
param.radiusRightNumber圆角 右 弧度borderRadius否
param.radiusBottomNumber圆角 下 弧度borderRadius否
param.radiusLeftNumber圆角 左下 弧度borderRadius否

drawText 绘制文本

进过封装后的绘制文本方法，可以使文本换行，超出隐藏，超出加省略号等功能
也支持基础的文本居中方向,加粗等
渲染文本为了平常写 css 的习惯，修改了默认对齐方式为左边，开始坐标为左上角的点（默认的 canvas 开始坐标为右下角）
对应 type:text

示例

var canvasShow = new css2canvas(`canvas对象`)

// 设置最大文本宽度为 334rpx.
// 文本左对齐
// 文本换行，最大为2行
// 行高为1.5
canvasShow.drawText({
  type: "text",
  x: 55,
  y: 690,
  width: 334,
  content: " 拼团 这个是商品名称这个是商品名称这个是商品名称这个是商品名称这个是商品名称这个是商品名称",
  color: "#666666",
  fontSize: 24,
  textAlign: "left",
  overflow: "warp",
  maxLine: 2,
  lineHeight: 1.5
})

参数说明

参数类型描述默认值必填
paramObject绘制文本的对应参数无是
param.xNumberx 坐标无是
param.yNumbery 坐标无是
param.widthNumber文本最大的宽度无否
param.overflowString文本超出后的处理 [ ellipsis:加省略号,hidden:直接隐藏,warp:超出换行 ]ellipsis否
param.maxLineNumber换行最大的行数无否
param.contentString需要渲染的文本无否
param.textAlignString文本对齐方式 [ left,right,center ]left否
param.fontSizeNumber字体大小无否
param.colorString文本颜色无否
param.fontWeightNumber文本加粗 [ 100:默认 200:加粗 300:更粗 ]100否
param.lineHeightNumber换行文本的行高（判断下一行开始的 y 坐标）1否
param.baselineString文本基线对齐方式，默认为 top 。 详细可以看 canvas 文档top否

getWidth 获取文本宽度

渲染元素的时候通常需要知道另外一些元素的宽高，这个可以获取指定文本，执行大小所占用的宽度
支持返回 px 或者 rpx 值

示例

var canvasShow = new css2canvas(`canvas对象`)

// 测量字号为36的 100 的文案的宽度
canvasShow.getWidth({
  text: "100",
  fontSize: 36,
  returnPx: false
})

参数说明

参数类型描述默认值必填
paramObject获取文本宽度的对应参数无是
param.textString需要测量的文本‘’是
param.fontSizeObject需要测量文本的字体大小根据上一次渲染的文本字体大小否
param.returnPxBoolean是否返回 px 像素false 默认返回 rpx 像素否

Bug&&Tips

  • 由于 canvas 渲染差异，传入 100 和 '100' （数字和字符串的区别）获取的宽度会存在一定的差异，建议都转换成字符串类型才测量文本宽度

drawLine 绘制直线

绘制指定的直线，指定开始和结束坐标

示例

var canvasShow = new css2canvas(`canvas对象`)
canvasShow.drawLine({
  x: 0,
  y: 0,
  end_x: 10,
  end_y: 10,
  width: 1,
  background: "#ccc"
})

参数说明

参数类型描述默认值必填
paramObject绘制直线需要的参数无是
param.xNumber起始点 x 坐标无否
param.yNumber起始点 y 坐标无否
param.end_xNumber终点 x 坐标无否
param.end_yNumber终点 y 坐标无否
param.widthNumber直线的宽度无否
param.backgroundNumber直线填充的颜色无否

作者

? Jioho

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator

Jioho_
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序录制视频功能实现
weixin_45032067的博客
08-10 7945
微信小程序录制视频
微信小程序---canvas
热门推荐
weixin_38961329的博客
02-10 1万+
canvas官网：CanvasRenderingContext2D.canvas - Web APIs | MDN 小程序-canvas组件：canvas | 微信开放文档
微信小程序开发之——仿微信视频录制上传
我的博客
01-10 2084
一 仿微信视频录制效果 二 业务说明 视频录制前，只显示取消和视频录制按钮 录制开始后，只显示视频录制按钮，并且上方显示时间、录制按钮显示录制进度 录制完成后，显示重拍、取消、上传按钮 录制完成后，点击按钮，可预览录制视频 点击重拍，录制视频消失，显示相机预览画面 点击取消，返回上一个界面 点击上传，将视频上传 三 可能遇到的问题(显示录制倒计时和录制进度) 3.1 布局文件(canvas绘制) <!--底部布局-中间部分-canvas绘制--> <view>
小程序 | canvas 2d篇 - 基础库 2.7.0 开始支持
zerobiu的博客
05-15 1762
小程序画布新版canvas 2d接口
微信小程序调取相机实现拍照/录屏（带demo）
oneya1的博客
01-24 3493
我已上传demo案例，有需要的童鞋自行下载，项目直接用微信开发者工具打开，主要修改成自己的appid；运行需要编译到pages/ar/scene-ar-germanBusiness1/index 页面后手机预览打开。可能刚打开是白屏，需要等一会，模型加载需要时间。index.json文件代码。index.wxml代码。index.wxml代码。index.js代码。index.js代码。
小程序预览PDF文件插件Pdf.js
11-20
小程序作为一种轻量级的应用形式，同样需要处理这样的问题。本文将详细介绍如何使用"小程序预览PDF文件插件Pdf.js"，以及在Uniapp框架中实现PDF预览的步骤。 Pdf.js是由Mozilla开发的一款开源JavaScript库，它允许...
uniapp小程序端普通二维码，彩色二维码，艺术二维码的生成
05-17
在本文中，我们将深入探讨如何在uniapp小程序端生成普通二维码、彩色二维码以及艺术二维码。uniapp是一个跨平台的应用开发框架，它允许开发者使用一套代码库来构建iOS、Android、Web、微信小程序等多个平台的应用。...
封装canvas各种方法的vue组件
09-07
而uniapp是由HBuilderX团队开发的跨端框架，支持编写一次代码，运行在微信小程序、支付宝小程序、H5等多个平台。这个Vue组件考虑到这些平台，可能已经处理了相应的适配问题，确保在不同环境下都能正常工作。 综上所...
微信小程序F2自定义图表组件f2-canvas-master.zip
09-25
微信小程序F2自定义图表组件f2-canvas-master.zip是一个包含使用F2库在微信小程序中构建自定义图表的资源包。F2是阿里AntV团队开发的一个轻量级、可扩展的移动图表库，它提供了丰富的图表类型和强大的交互功能，能够...
微信去水印小程序前端+后端
最新发布
04-05
微信去水印小程序是一种专为处理微信平台视频和图片水印的应用程序，它允许用户轻松去除内容中的水印，以获得更加纯净的视觉体验。这个项目包括了前端和后端的完整开发源码，以及相应的接口，使得开发者或运营者可以...
小程序 | canvas篇
zerobiu的博客
04-24 1487
小程序分享海报画布，小程序画布实现，小程序基础功能
canvas 判断哪个元素被点击_Selenium如何定位到canvas以及如何单击canvas上的元素
weixin_39975529的博客
12-22 4138
最近在做一个自动化的上传项目，碰到了Selenium需要点击canvas上的元素关闭网页蒙层的问题？ 想了好久一直没有解决，在网上搜索和实践，终于找到解决方法。1.定位canvas这个比较简单，有很多方法，比如 find_element_by_id()2.点击canvas中的元素，关闭蒙层这里需要用到 ActionChains 这个类，它是继承selenium.webdriver这个父类，使用方法...
微信小程序如何获取元素节点信息？
weixin_46265708的博客
10-30 5235
通常在做微信小程序的时候我们经常会需要获取元素的信息，但是微信小程序有没有完整的“DOM”操作，无法像浏览器中获取元素。不过在微信中也有一套自己的“DOM”，那就是NodesRef，它可以让我们像开发浏览器程序一样轻松愉快的获取页面元素。
uni-app 如何判断点击事件真的点到了图片内容上
qq_35638140的博客
01-17 1407
根据用户点击的落点来判断点击的是哪块区域，进而进行不同的逻辑处理
canvas 判断哪个元素被点击_监听Canvas内部元素点击事件的三种方法
weixin_39860919的博客
12-22 1096
canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于某个canvas图形内部。约定本文介绍的三种方法适...
微信小程序canvas画图案列,实现生成头像并保存,小程序新版canvas变化,小程序中canvas注意事项
白云苍狗
01-15 2359
小程序canvas如何使用,利用canvas生成头像并保存,新旧版canvas对比.小程序canvas的功能介绍
踩坑小程序canvas，撤销操作实现
末日码农 - 专注前端开发
02-11 1596
接上一篇文章：踩坑小程序canvas，uni + vite + vue3 搞起来 小程序搜索【涂图了】，可进行体验。 轨迹自动播放实现 在画布上绘制笔迹的时候，通过touchmove事件将每一次绘制的点坐标都记录起来，同时也要将当前笔迹的颜色、宽度等数据记录起来。最终画布上所有的笔迹都转换成了一个数据列表，当播放的时候，再将列表里面的数据一条一条的在canvas上重新绘制出来，通过setTimeout进行自动循环不断的去绘制。 看代码： class Paint { // ...省略... /**
实现canvas绘制时的撤回功能
zem
04-07 6169
canvas在用于绘制图形上相当实用，如果我们要记录某个时刻canvas的内容，在另一个时刻显示，可以使用getImageData和putImageData。 getImageData用于记录当前canvas的内容，其接收四个参数，getImageData(x,y,width,height)，x,y为起始的坐标，width和height为记录下的内容宽度高度 let canvas = doc...
微信小程序关闭canvas
09-10
微信小程序的 canvas 可以通过以下方法关闭： 1. 在页面的 JavaScript 代码中调用 canvas 的实例的 destroy() 方法，来销毁 canvas。 2. 通过设置 canvas 元素的 style.display 属性为 "none"，来隐藏 canvas。 3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值