uniapp封装canvas组件无脑绘制保存小程序分享海报

目录
  • 正文
  • 配置项
  • 一、使用
  • 二、封装m-canvas组件
  • 三、声明canvas.js,封装方法

正文

小程序分享海报想必大家都做过,受微信的限制,无法直接分享小程序到朋友圈(虽然微信开发者工具基础库从2.11.3开始支持分享小程序到朋友圈,但目前仍处于Beta中),所以生成海报仍然还是主流方式,通常是将设计稿通过canvas绘制成图片,然后保存到用户相册,用户通过图片分享小程序

但是,如果不是对canvas很熟悉的话,每次都要去学习canvas的Api,挺麻烦的。我只想“无脑”的完成海报的绘制,就像是把每一个元素固定定位一样,告诉它你要插入的是图片、还是文字,然后再传入坐标、宽高就能把在canvas绘制出内容。

怎么做呢?接着往下看(注:本文是基于uniapp Vue3搭建的小程序实现的海报功能)

配置项

属性 说明 可选值
type 元素类型 image、text、border、block(一般用于设置背景色块)
left 元素距离canvas左侧的距离 数字或者center,center表示水平居中,比如10、'center'
right 元素距离canvas右侧的距离 数字,比如10
top 元素距离canvas顶部的距离 数字,比如10
bottom 元素距离canvas底部的距离 数字,比如10
width 元素宽度 数字,比如20
height 元素高度 数字,比如20
url type为image时的图片地址 字符串
color type为text、border、block时的颜色 字符串,比如#333333
content type为text时的文本内容 字符串
fontSize type为text时的字体大小 数字,比如16
radius type为image、block时圆角,200表示圆形 数字,比如10
maxLine type为text时限制最大行数,超出以…结尾 数字,比如2
lineHeight type为text时的行高,倍数 数字,比如1.5,默认1.3

一、使用

<template>
  <m-canvas ref="myCanvasRef" :width="470" :height="690" />
  <button @click="createPoster">生成海报</button>
</template>
<script setup>
  import { ref } from 'vue'
  const myCanvasRef = ref()
  function createPoster() {
    // 配置项
    const options = [
      // 背景图
      {
        type: 'image',
        url: '自行替换',
        left: 0,
        top: 0,
        width: 470,
        height: 690
      },
      // 长按扫码 > 浏览臻品 > 获取权益
      {
        type: 'text',
        content: '长按扫码 > 浏览臻品 > 获取权益',
        color: '#333',
        fontSize: 20,
        left: 'center',
        top: 240
      },
      // 小程序码白色背景
      {
        type: 'block',
        color: '#fff',
        radius: 30,
        left: 'center',
        top: 275,
        width: 245,
        height: 245
      },
      // 小程序码
      {
        type: 'image',
        url: '自行替换',
        left: 'center',
        top: 310,
        width: 180,
        height: 180
      },
      // 头像
      {
        type: 'image',
        url: '自行替换',
        radius: '50%',
        left: 'center',
        top: 545,
        width: 50,
        height: 50
      },
      // 昵称
      {
        type: 'text',
        content: 'Jerry',
        color: '#333',
        fontSize: 20,
        left: 'center',
        top: 625
      }
    ]
    // 调用myCanvas的onDraw方法,绘制并保存
    myCanvasRef.value.onDraw(options, url => {
      console.log(url)
    })
  }
</script>
<style lang="scss" scoped></style>

二、封装m-canvas组件

<template>
  <canvas class="myCanvas" canvas-id="myCanvas" />
</template>
<script setup>
  import { getCurrentInstance } from 'vue'
  // 引入canvas方法
  import { createPoster } from './canvas'
  const { proxy } = getCurrentInstance()
  // 宽高需要传哦~
  const props = defineProps({
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    }
  })
  // 导出方法给父组件用
  defineExpose({
    onDraw(options, callback) {
      createPoster.call(
        // 当前上下文
        proxy,
        // canvas相关信息
        {
          id: 'myCanvas',
          width: props.width,
          height: props.height
        },
        // 元素集合
        options,
        // 回调函数
        callback
      )
    }
  })
</script>
<style lang="scss" scoped>
  // 隐藏canvas
  .myCanvas {
    left: -9999px;
    bottom: -9999px;
    position: fixed;
    // canvas宽度
    width: calc(1px * v-bind(width));
    // canvas高度
    height: calc(1px * v-bind(height));
  }
</style>

三、声明canvas.js,封装方法

/** @生成海报 **/
export function createPoster(canvasInfo, options, callback) {
  uni.showLoading({
    title: '海报生成中…',
    mask: true
  })
  const myCanvas = uni.createCanvasContext(canvasInfo.id, this)
  var index = 0
  drawCanvas(myCanvas, canvasInfo, options, index, () => {
    myCanvas.draw(true, () => {
      // 延迟,等canvas画完
      const timer = setTimeout(() => {
        savePoster.call(this, canvasInfo.id, callback)
        clearTimeout(timer)
      }, 1000)
    })
  })
}
// 绘制中
async function drawCanvas(myCanvas, canvasInfo, options, index, drawComplete) {
  let item = options[index]
  // 最大行数:maxLine  字体大小:fontSize  行高:lineHeight
  //    类型    颜色  left  right  top  bottom   宽      高     圆角    图片  文本内容
  let { type, color, left, right, top, bottom, width, height, radius, url, content, fontSize } = item
  radius = radius || 0
  const { width: canvasWidth, height: canvasHeight } = canvasInfo
  switch (type) {
    /** @文本 **/
    case 'text':
      if (!content) break
      // 根据字体大小计算出宽度
      myCanvas.setFontSize(fontSize)
      // 内容宽度:传了宽度就去宽度,否则取字体本身宽度
      item.width = width || myCanvas.measureText(content).width
      console.log(myCanvas.measureText(content))
      // left位置
      if (right !== undefined) {
        item.left = canvasWidth - right - item.width
      } else if (left === 'center') {
        item.left = canvasWidth / 2 - item.width / 2
      }
      // top位置
      if (bottom !== undefined) {
        item.top = canvasHeight - bottom - fontSize
      }
      drawText(myCanvas, item)
      break
    /** @图片 **/
    case 'image':
      if (!url) break
      var imageTempPath = await getImageTempPath(url)
      // left位置
      if (right !== undefined) {
        left = canvasWidth - right - width
      } else if (left === 'center') {
        left = canvasWidth / 2 - width / 2
      }
      // top位置
      if (bottom !== undefined) {
        top = canvasHeight - bottom - height
      }
      // 带圆角
      if (radius) {
        myCanvas.save()
        myCanvas.beginPath()
        // 圆形图片
        if (radius === '50%') {
          myCanvas.arc(left + width / 2, top + height / 2, width / 2, 0, Math.PI * 2, false)
        } else {
          if (width < 2 * radius) radius = width / 2
          if (height < 2 * radius) radius = height / 2
          myCanvas.beginPath()
          myCanvas.moveTo(left + radius, top)
          myCanvas.arcTo(left + width, top, left + width, top + height, radius)
          myCanvas.arcTo(left + width, top + height, left, top + height, radius)
          myCanvas.arcTo(left, top + height, left, top, radius)
          myCanvas.arcTo(left, top, left + width, top, radius)
          myCanvas.closePath()
        }
        myCanvas.clip()
      }
      myCanvas.drawImage(imageTempPath, left, top, width, height)
      myCanvas.restore()
      break
    /** @盒子 **/
    case 'block':
      // left位置
      if (right !== undefined) {
        left = canvasWidth - right - width
      } else if (left === 'center') {
        left = canvasWidth / 2 - width / 2
      }
      // top位置
      if (bottom !== undefined) {
        top = canvasHeight - bottom - height
      }
      if (width < 2 * radius) {
        radius = width / 2
      }
      if (height < 2 * radius) {
        radius = height / 2
      }
      myCanvas.beginPath()
      myCanvas.fillStyle = color
      myCanvas.strokeStyle = color
      myCanvas.moveTo(left + radius, top)
      myCanvas.arcTo(left + width, top, left + width, top + height, radius)
      myCanvas.arcTo(left + width, top + height, left, top + height, radius)
      myCanvas.arcTo(left, top + height, left, top, radius)
      myCanvas.arcTo(left, top, left + width, top, radius)
      myCanvas.stroke()
      myCanvas.fill()
      myCanvas.closePath()
      break
    /** @边框 **/
    case 'border':
      // left位置
      if (right !== undefined) {
        left = canvasWidth - right - width
      }
      // top位置
      if (bottom !== undefined) {
        top = canvasHeight - bottom - height
      }
      myCanvas.beginPath()
      myCanvas.moveTo(left, top)
      myCanvas.lineTo(left + width, top + height)
      myCanvas.strokeStyle = color
      myCanvas.lineWidth = width
      myCanvas.stroke()
      break
  }
  // 递归边解析图片边画
  if (index === options.length - 1) {
    drawComplete()
  } else {
    index++
    drawCanvas(myCanvas, canvasInfo, options, index, drawComplete)
  }
}
// 下载并保存
function savePoster(canvasId, callback) {
  uni.showLoading({
    title: '保存中…',
    mask: true
  })
  uni.canvasToTempFilePath(
    {
      canvasId,
      success(res) {
        callback && callback(res.tempFilePath)
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            uni.showToast({
              icon: 'success',
              title: '保存成功!'
            })
          },
          fail() {
            uni.showToast({
              icon: 'none',
              title: '保存失败,请稍后再试~'
            })
          },
          complete() {
            uni.hideLoading()
          }
        })
      },
      fail(res) {
        console.log('图片保存失败:', res.errMsg)
        uni.showToast({
          icon: 'none',
          title: '保存失败,请稍后再试~'
        })
      }
    },
    this
  )
}
// 绘制文字(带换行超出省略…功能)
function drawText(ctx, item) {
  let { content, width, maxLine, left, top, lineHeight, color, fontSize } = item
  content = String(content)
  lineHeight = (lineHeight || 1.3) * fontSize
  // 字体
  ctx.setFontSize(fontSize)
  // 颜色
  ctx.setFillStyle(color)
  // 文本处理
  let strArr = content.split('')
  let row = []
  let temp = ''
  for (let i = 0; i < strArr.length; i++) {
    if (ctx.measureText(temp).width < width) {
      temp += strArr[i]
    } else {
      i-- //这里添加了i-- 是为了防止字符丢失,效果图中有对比
      row.push(temp)
      temp = ''
    }
  }
  row.push(temp) // row有多少项则就有多少行
  //如果数组长度大于2,现在只需要显示两行则只截取前两项,把第二行结尾设置成'...'
  if (row.length > maxLine) {
    let rowCut = row.slice(0, maxLine)
    let rowPart = rowCut[1]
    let text = ''
    let empty = []
    for (let i = 0; i < rowPart.length; i++) {
      if (ctx.measureText(text).width < width) {
        text += rowPart[i]
      } else {
        break
      }
    }
    empty.push(text)
    let group = empty[0] + '...' //这里只显示两行,超出的用...表示
    rowCut.splice(1, 1, group)
    row = rowCut
  }
  // 把文本绘制到画布中
  for (let i = 0; i < row.length; i++) {
    // 一次渲染一行
    ctx.fillText(row[i], left, top + i * lineHeight, width)
  }
}
// 获取图片信息
function getImageTempPath(url) {
  return new Promise((resolve) => {
    if (url.includes('http')) {
      uni.downloadFile({
        url,
        success: (res) => {
          uni.getImageInfo({
            src: res.tempFilePath,
            success: (res) => {
              resolve(res.path)
            }
          })
        },
        fail: (res) => {
          console.log('图片下载失败:', res.errMsg)
        }
      })
    } else {
      resolve(url)
    }
  })
}

以上就是uniapp封装canvas组件无脑绘制保存小程序分享海报的详细内容,更多关于uniapp封装canvas的资料请关注我们其它相关文章!

(0)

相关推荐

  • uniapp引用echarts的详细步骤(附柱状图实例)

    相信很多小伙伴对于echarts这个东西应该不会陌生,我在网上看到很多文章,那么他到底是怎么用的呢,却是五花八门,我现在就来总结一下我的方法. 如果使用npm全局安装,太麻烦,这里推荐使用官网(ECharts 在线构建)定制下载,这样会方便我们使用. 选择柱状图,折线图,饼图:这三样是平常较常用到的: 坐标系选择直角坐标系: 组件可以全选,也可以选择自己所需要的,在这里个人建议除了工具栏不选,其他都选上:下载后的文件为echarts.min.js,建议把他放在static内. 好了,来到下一步,

  • uniapp微信小程序自定义导航栏的全过程

    目录 前言 那么标题栏的高度我们怎么获取呢? 献上源码: 组件使用: 效果图: 总结 前言 相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用,今天也给大家分享一个我自己写的导航栏啦,希望大家多多指点 首先我们在自定义导航栏的时候,我们需要知道头部的导航栏有哪几部分组成,那么我们以微信小程序

  • 微信小程序用canvas实现圆形进度条

    本文实例为大家分享了微信小程序用canvas实现圆形进度条的具体代码,供大家参考,具体内容如下 先放效果图,如下: 1. wxml文件代码如下 对于圆形进度条中间的文字,如果是简单的,可以用它自带的属性去填充. 比较复杂的,就可以像下面,通过样式将文字定位到圆形进度条中间合适位置. <view class='circlePage'>   <view class='wrap'>     <!-- 圆形中间的文字 -->     <view class="c

  • uniapp地图组件(map)使用与遇到的一些问题总结

    目录 前言 首先先看成品 定位图标 获取自身经纬度 通过经纬度 获取当前城市信息 总结 前言 这段时间在开发uniapp的时候使用到map组件 总结一下本次在uniapp中使用map遇到的一些问题 文章分别是基础 定位图标  获取自身经纬度 通过经纬度获取当时城市信息 首先先看成品 废话不多说,直接开始. 首先引入map组件 <template> <view class="content"> <map style="width: 100%; he

  • vue项目中canvas实现截图功能

    本文实例为大家分享了vue项目中canvas实现截图功能的具体代码,供大家参考,具体内容如下 实现效果: 整理一下最近在vue项目中做的一个截图功能(只能够截取图片),即用鼠标在画布上进行框选截取. 思路大概如下:做一个弹窗,打开弹窗的时候传入要截的图,接下来在这个窗口里面,点击截图按钮,开始截图,点击取消按钮,取消截图. 窗口里面的html主要是三个部分,一个是可截图区域,一个是截取图片的回显,一个是操作按钮(截图按钮和取消截图按钮). 部分html: <!--截图区域--> <div

  • 微信小程序canvas实现手写签名

    本文实例为大家分享了微信小程序canvas实现手写签名的具体代码,供大家参考,具体内容如下 很多时候,程序中需要用到签名的功能,附上源码(微信小程序) .wxml <view class="canvasBox">       <view class="canvasTitle">请签名:</view>       <view class="canvasContent">         <vie

  • uniapp封装canvas组件无脑绘制保存小程序分享海报

    目录 正文 配置项 一.使用 二.封装m-canvas组件 三.声明canvas.js,封装方法 正文 小程序分享海报想必大家都做过,受微信的限制,无法直接分享小程序到朋友圈(虽然微信开发者工具基础库从2.11.3开始支持分享小程序到朋友圈,但目前仍处于Beta中),所以生成海报仍然还是主流方式,通常是将设计稿通过canvas绘制成图片,然后保存到用户相册,用户通过图片分享小程序 但是,如果不是对canvas很熟悉的话,每次都要去学习canvas的Api,挺麻烦的.我只想“无脑”的完成海报的绘制

  • JS绘制微信小程序画布时钟

    微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟. 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口. 首先来看一下构建这样一个小程序所需要的目录结构 从目录结构就可以看出来这个程序是简单的单层页面,画布渲染在pages下面的index页面上. 其中对程序有实际驱动作用的代码分别在index.js,index.wxml,index.wxss和app.json这几个文件中 Index.js文件里面存放着程序的逻辑层数据,

  • 绘制微信小程序验证码功能的实例代码

    1.在 utils 文件中新建 mcaptcha.js 文件,写入以下代码: module.exports = class Mcaptcha { //画板 constructor(options) { this.options = options; this.fontSize = options.height * 3 / 4; this.init(); this.refresh(this.options.code); } init() { this.ctx = wx.createCanvasCo

  • iOS组件依赖避免冲突的小技巧分享

    问题缘由 本文以 YBImageBrowser[1] 组件举例. YBImageBrowser 依赖了 SDWebImage,在使用 CocoaPods 集成到项目中时,可能会出现一些依赖冲突的问题,最近社区提了多个 Issues 并且在 Insights -> Traffic -> Popular content 中看到了此类问题很高的关注度,所以不得不着手解决. 严格的版本限制 一个开源组件的迭代过程中,保证上层接口的向下兼容就不错了.为了优化性能并且控制内存,YBImageBrowser

  • vue.js如何将echarts封装为组件一键使用详解

    前言 本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 说明 做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview.element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装 控件演示 控件使用 概要 基于echarts的二次封装 由数据驱动 控件源码见src/com

  • 微信小程序自定义tabBar在uni-app的适配详解

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

  • 微信小程序vant弹窗组件的实现方式

    作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗,再到完全研究清楚vant-weapp框架弹窗组件部分源码. 一.vant-weapp弹窗组件介绍 vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件

  • 微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕看不见的地方(定位left:1000px)绘制出canvas,绘制完成将canvas转为图片显示.点击保存按钮,将本地缓存路径的图片下载到手机相册,在这里需要进行授权处理 untils.js文件 // 参数说明: mainImg 商品图 headImg 微信头像 onshareImg 二维码 goodsName 商品名称 go

  • uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

    目录 需求 实现原理 实现 总结 需求 分包中如果有6个页面A B C D E F,这6个页面可以作为tabbar页面进行展示,具体配置通过后台接口返回(页面数量限制依然存在 2 - 5),比如后台配置A B C D E这个5个页面为tabbar页面,那么A B C D E将作为tab页展示,跳转方式也是tab方式跳转,跳转到F页面为普通navigate跳转.这将解决 多商家底部tab配置问题,可以让商家自己配置小程序tab页的展示模式. 实现原理 1.自定义底部导航,数据通过接口获取 2.将需

随机推荐