Taro 小程序引入 Painter 实现动态生成图片

LibraHeresy
• 阅读 380

前言

分享给用户一个二维码图片,这是一个很简单的功能,但因为这是小程序环境,且涉及Canvas,那就不简单了。

话不多说,搞起。

环境

node: 14.17.3

Taro: 3.0.21

Painter: 2.2.2

实现

npm 社区的理念就是不造重复轮子,而我身体力行的实践着这个理念。花了半个小时,找到一个可以用来生成图片的包,Painter

这个包就和echarts一样,难点就是繁琐的配置,但是上手以后,意外的简单好用。

我只介绍最基本的用法,如果有其他需求,请移步Painter 文档

引入组件包

我这里引入的原生小程序版本的,因为我对npm包在小程序的表现存在一定质疑。

export default {
  // Taro 小程序引用原生小程序组件
  usingComponents: {
    painter: "./components/Painter/painter",
  },
};

引入以后,直接调用就可以了,别忘了给它一个独一无二的id

<template>
  ......
  <painter id="share-post-painter" :use2-d="true" :palette="config" />
</template>

编写 config

我会介绍几个常用的配置属性,帮助快速上手。

其实这个包的理念很像搭积木,就是先打一个底座,然后把你要放上去的元素都化为一个个积木块,再按照你的想法组装到对应的位置。

class config {
  width = "500px"; // 图片宽度
  height = "500px"; // 图片高度
  background = ""; // 图片背景
  views = [
    {
      type: "image", // 图片view
      url: "", // 图片view图片地址
      css: {
        top: "", // 距顶定位
        left: "", // 距左定位
        width: "", // 图片view宽度
        height: "", // 图片view高度
      },
    },
    {
      type: "text", // 文字view
      text: "文字", // 文字view内容
      css: {
        top: "", // 距顶定位
        left: "", // 距左定位
        fontSize: "", // 文字大小
        fontWeight: "", // 文字宽度
        align: "", // 文字排版方式
        color: "", // 文字颜色
      },
    },
    {
      type: "qrcode", // 二维码view
      content: "", // 二维码url
      css: {
        bottom: "", // 距底定位
        left: "", // 距左定位
        width: "", // 二维码宽度
        height: "", // 二维码高度
      },
    },
  ];
}

分享图片

等组件直接渲染完成,他也会在本地存储临时图片地址,这个时候直接获取就行了。

const share = () => {
  // 获取当前页面实例,可以使用小程序页面实例的 selectComponent API 获取第三方原生组件的实例
  const { page } = Taro.getCurrentInstance();
  // 获取painter组件实例
  const refPainter = page.selectComponent("#share-post-painter");
  // 获取painter组件实例中的本地图片地址
  wx.showShareImageMenu({
    path: refPainter.data.picUrl,
  });
};
点赞
收藏
评论区
推荐文章
CuterCorley CuterCorley
3年前
uni-app入门教程(7)第三方登录和分享
前言本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uniapp实现有不同的接口和实现方式。一、通用配置因为小程序和APP登录接口不同,需要在前端进行跨端兼容处理,同时微信等平台的小程序一般只支持所属宿主程序的第三方登录,而无法包括其他的
Wesley13 Wesley13
3年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
Easter79 Easter79
3年前
Taro 在京东购物小程序上的实践
Taro简介Taro是一个基于React语法规范的多端统一开放框架,大家可以通过taro.aotu.io进一步了解。而前段时间Taro发布后,京东购物小程序就开始了部分页面基于Taro的重构工作,本文便是对商品分类页使用Taro进行代码重构的一些实践分享。混合开发模式过去的京东购物小程序未使用任何第三
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Easter79 Easter79
3年前
Taro 1.2:将已有微信小程序转换为多端应用
在距离Taro1.1发布之后一个月,经历了500多次提交和17 个预览版本的迭代之后,我们有信心在今天发布Taro1.2正式版。Taro1.2比起Taro1.1和其它的小程序开发框架,增加了许多首次在小程序框架上实现的功能,这些功能包括但不限于:微信小程序转多端应用字节跳动(头
Stella981 Stella981
3年前
C语言Linix服务器网络爬虫项目(一)项目初衷和网络爬虫概述
一、项目初衷和爬虫概述1.项目初衷  本人的大学毕设就是linux上用c写的一个爬虫,现在我想把它完善起来,让他像一个企业级别的项目。为了重复发明轮子来学习轮子的原理,我们不使用第三方框架(这里是说的是指通常的linux系统编程教材以外的库和接口0,当初我也是在虚拟机上跑的ubuntuputtyvim来开发)来实现。  然而我们造轮
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
使用taro+canvas实现微信小程序的图片分享功能 | 京东云技术团队
业务场景二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。使用场景及功能:微信小程序生成海报图片分享好友下载图片使用技