来~打包实现小程序动态分享图一条龙服务( ¨̮ )

栏目: Html5 · 发布时间: 5年前

内容简介:前一阵有完成在小程序内动态生成图片再进行分享的需求,是很常见的场景,因此我抽出了一个小工具使用也很简单~无需染指到

前一阵有完成在小程序内动态生成图片再进行分享的需求,是很常见的场景,因此我抽出了一个小工具 CanvasPainter.js ,囊括在小程序内canvas画图基本需求:

  • 用配置形式绘图(暂支持单行及多行文本,矩形,圆形,图片及圆形图片类型),以及支持后续预览及保存成图片,且皆为Promise格式。
  • canvas尺寸以一般设计稿的750px为准(可配),在不同屏幕机型下等比缩放。
  • 生成图片时,支持图片预下载,及在一个小程序周期内缓存图片下载的tmp路径。

demo地址

来~打包实现小程序动态分享图一条龙服务( ¨̮ )

用法

使用也很简单~无需染指到 wx.各种api ,直接配置初始化+调用对应方法即可,一条龙服务美滋滋~

import CanvasPainter from './CanvasPainter';

const config = [
{type:'rect, width: 640, height: 560, x: 0, y: 0, color: '#fff'},
{type: 'text', text: '测试文本', color: '#1499f8',size: 50, x: 30,y: 100}
]

// 初始化
const painter = new CanvasPainter({
    canvasId: `canvasId`,
    context: this, // 组件内使用需传this
    config //画图路径
});
painter.loadImgInAdvance(); //预下载图片到本地;如不主动调用,则draw的时候会再下载。

// 更新画图路径
painter.resetConfig(newConfig);

// 画图
painter.draw().then(() => {
    console.log('画图完成');   
}).catch(e => {
    console.log('生成图片失败', e);
});

// 预览
painter.preview();

// 保存
painter.save().then(() => {
    console.log('保存完成');   
}).catch(e => {
    console.log('保存失败', e);
});
复制代码

开发过程中遇到的要点记录如下:

  • 如何等比缩放

    因为canvas绘图时的长度单位为px,所以可以利用小程序的canvas.scale()来解决。

    const scale = wx.getSystemInfoSync().windowWidth / 750;
    this.ctx.scale(scale, scale); // 这样可以实现以750px尺寸的ui图等比缩放
    复制代码
  • 绘制图片预下载及缓存

    调用 ctx.drawImage() 时,图片需要先下载到本地临时路径,这一步耗时较长,所以建议前置进行。 临时路径的有效期为一个小程序周期 ,所以完全可以缓存本地临时路径。这样重复生成canvas时只会下载动态图片,复用固定图片路径,避免重复下载~

    另外图片域名需配置在小程序后台,为避免意外,下载图片前应先对图片url做一次校验,校验失败直接跳过下载或换用兜底图。

  • 下载图片到本地

    在save图片前,需要先调用 wx.getSetting() 来获取用户是否已允许下载图片到本地权限,或是唤起请求权限弹窗。如果权限被拒绝,则最好给出toast提示,同时把下载按钮重置为 open-type="openSetting" ,用户再次点击时,引导跳转至授权页面。

另外使用时也有两点不温馨提示:

  • canvas组件显隐控制

    不建议将canvas组件用wx:if控制显隐,因为将canvas组件挂载至页面后,要经过200ms左右的延迟才能draw()成功。建议直接用 display:none/block 来控制,这样也方便实现图片预下载。

  • 结合业务抽离组件

    建议结合当前业务将生成分享图功能进一步抽离成组件,包括内嵌点击canvas预览图片,保存canvas为图片按钮(兼容未授权下载图片跳转授权页情况)等。亦可更灵活的自由控制画图及更新画图的时机。

注意到这两点后,就可以分分钟撸出一个动态生成图啦~

附:完整API

初始化

new CanvasPainter(options)

options

  • canvsId : canvas-id。

  • context : canvas使用时上下文,在组件内使用时传入this即可。

  • config : Array[]。绘图路径。支持类型如下:

    • rect 矩形

      完整配置:{
      	type: 'rect',
      	width: 640,
      	height: 560,
      	x:0,
      	y:0,
      	color: '#fff', // fill下为填充颜色,storke下为笔迹颜色
      	stroke(可选): true, // 代表模式为fill还是stroke。默认false,即fill状态。
      	round(可选): true, // 代表是否为圆形。默认false。
      }
      复制代码
    • text 文本

      完整配置:{
      	type: 'text',
      	x:0,
      	y:30,
      	color: '#fff', // 字色
      	font: 'xx', // 字体
      	size: 20, //字号
      	align: 'center', //对齐。默认left。
      	decoration(可选): 'line-through', // 暂时只有中划线模式哈哈哈
      }
      复制代码
    • multiline_text 多行文本

      完整配置:{
      	type: 'multiline_text',
      	line_limit: 30, //每行字数
      	line_height: 20, //行高
      	... //其余都与text一致
      }
      复制代码
    • image 图片

      完整配置:{
      	type: 'image',
      	url: '', //图片路径
      	x: '', y: '', width: '', height:'',
      	round(可选): true, // 圆形。默认false。
      }
      复制代码
  • saleBase(可选) : 按设计稿尺寸来,默认750。

预下载图片:

canvasPainter.loadImgInAdvance() 。可在实例化CanvasPainter后立即调用。

绘图:

canvasPainter.draw()

预览大图:

canvasPainter.preview()

保存成图片:

canvasPainter.save()

更改config:

canvasPainter.resetConfig(newConfig)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Definitive Guide to HTML5 WebSocket

The Definitive Guide to HTML5 WebSocket

Vanessa Wang、Frank Salim、Peter Moskovits / Apress / 2013-3 / USD 26.30

The browser is, hands down, the most popular and ubiquitous deployment platform available to us today: virtually every computer, smartphone, tablet, and just about every other form factor imaginable c......一起来看看 《The Definitive Guide to HTML5 WebSocket》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具