首页 > 编程语言 >开源组件 | 一款好用的小程序生成图片库

开源组件 | 一款好用的小程序生成图片库

时间:2023-10-16 17:55:40浏览次数:40  
标签:图片库 模版 生成 开源 view 好用 painter 图片


一、项目概述

想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹(有关小程序的坑,可看 https://github.com/Kujiale-Mobile/MP-Keng )。我们就想到可不可以做一款可以很方便生成图片,并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢?对此我们发起了 “画家计划— 通过 json 数据形式,来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下:image.png

        首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。

        经过了一段时间的进步,painter 在大家的建议与贡献下得到了长足的成长。我们感谢各位使用者在这个过程中对 painter 的支持和帮助,这也是我们不断完善 painter 的最大动力。我们将为大家介绍 painter 的新能力,并明确下一阶段的迭代目标。

二、 技术特性

  • 功能全,支持文本、图片、矩形、qrcode 类型的 view 绘制

  • 布局全,支持多种布局方式,如 align(对齐方式)、rotate(旋转)

  • 支持圆角,其中图片,矩形,和整个画布支持 borderRadius 来设置圆角

  • 支持边框,同时支持 solid、dashed、dotted 三种类型

  • 支持渐变色,包括线性渐变与径向渐变。

  • 支持 box-shadow 和 text-shadow,统一使用 shadow 表示。

  • 支持文字背景、获取宽度、主动换行

  • 支持自定义字体

  • 支持图片 mode

  • 支持元素的相对定位方法

  • 杠杠的性能优化,我们对网络素材图片加载实现了一套 LRU 存储机制,不用重复下载素材图片。

  • 杠杠的容错,因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制,如果绘图出错会进行重绘。

  • 生成的图片支持分辨率调节

  • 支持使用拖动等操作动态编辑绘制内容

三、 组件文档

属性类型说明必填默认值
customStyle string canvas 的自定义样式  
palette IPalette 静态模版,具体规范下文有详细介绍  
scaleRatio number 缩放比,会在传入的 palette 中统一乘以该缩放比,作用和 widthPixels 类似,所以不要同时使用 1
widthPixels number 生成的图片的像素宽度,如不传则根据模版动态生成  
dirty boolean 是否启用脏检查 false
LRU boolean 是否开启 LRU 机制 false
dancePalette IPalette 动态模版,规范同静态模版  
customActionStyle ICustomActionStyle 选择框、缩放图标、删除图标的自定义样式与图片  
action IView 动态编辑内容,用于刷新动态模版  
disableAction boolean 禁止动态编辑操作 false
clearActionBox boolean 清除动态编辑框 false
imgErr function 图片生成失败,可以从 e.detail.error 获取错误信息  
imgOk function 图片生成成功,可以从 e.detail.path 获取生成的图片路径  
viewUpdate function 动态模版, view 被更新,可从 e.detail.view 获取更新的 view  
viewClicked function 动态模版, view 被选中, 可从 e.detail.view 获取点击的 view,如为空,则是选中背景  
touchEnd function 动态模版,触碰结束。只有 view,代表触碰的对象;包含 view、type、index,代表点击了删除 icon;  
didShow function 动态模版,绘制结束时触发  
use2D boolean 是否使用 canvas2d 接口(注意!使用 use2D 就无法使用 dancePalette 与 action) false

 

 

五、 本地运行

运行例子

git clone https://github.com/Kujiale-Mobile/Painter.git

代码下载后,用小程序 IDE 打开后即可使用。

注:请选择小程序项目,非小游戏,例子中无 appid,所以无法在手机上运行,如果需要真机调试,请在打开例子时,填上自己的小程序 id

快速开始

mpvue 的使用方法请移步 mpvue 接入方案

taro 的使用方法请参考 Taro 接入方案 painter 已发布 taro 版本的 npm 包mina-painter

  1. 引入代码

    Painter 的核心代码在另一个 repo 中,https://github.com/Kujiale-Mobile/PainterCore.git 。你可以通过 submodule 的方式进行库的引入。有关 submodule 的用法可自行 Google。

    git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter

  2. 作为自定义组件引入,注意目录为第一步引入的代码所在目录

    "usingComponents":{  "painter":"/components/painter/painter"}

  3. 组件接收 palette 字段作为画图数据的数据源, 图案数据以 json 形式存在,推荐使用“皮肤模板”的方法进行传递,示例代码如下:

    <painter palette="{{data}}" bind:imgOK="onImgOK" />

    你可以通过设置 widthPixels 来强制指定生成的图片的像素宽度,否则,会根据你画布中设置的大小来动态调节,比如你用了 rpx,则在 iphone 6 上会生成 0.5 倍像素的图片。由于 canvas 绘制的图片像素直接由 Canvas 本身大小决定,此处通过同比例放大整个画布来实现对最后生成的图片大小的调节。

    <painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>

  4. 数据传入后,则会自动进行绘图。绘图完成后,你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。

    bind:imgOK="onImgOK"bind:imgErr="onImgErr"onImgOK(e) {  其中 e.detail.path 为生成的图片路径},

  5. 你也可以通过使用 dancePalette 、 action 等字段开启 painter 的高阶用法。具体使用方式将会在下方有详细描述。在新版 painter 中,静态模版默认相对 painter 本身 left: -9999px 。因此正常情况下使用 painter 时出现在页面上的都是动态模版。如果希望禁止用户的操作,可以按照使用静态模版的做法,只传 palette 属性即可。

五 、功能截图

   image.png

六、项目源码

开源地址:

扫描下方二维码并回复【Painter】获取项目源码。

 

往期推荐

人人可用的开源数据可视化分析工具

面向中小企业级erp、oms、wms全套解决方案

开源支付系统、支持微信支付宝

SpringBoot + Vue 的智能停车场管理平台

多门店分销的开源前后端分离商城系统

全端开源电商系统支持小程序、H5、PC商城

后台、小程序、uniapp前后端分离完整全开源商城

开源物联网基础开发平台

开源人脸识别登录系统

写在最后

专注分享开源项目整套解决方案,完全开源、可学习、可商用、宝藏库。

完整开源项目后端技术栈:Spring6、JDK17、SpringBoot、Spring Cloud、Docker、Nginx、Redis、MongoDB、MySql不管你技术提升还是接私活都可以用到。

完整开源项目前端技术栈:vue3、vite3、TypeScript/4、Ant-Design-Vue/3.2、element-plus/2.2、uniapp、H5网页、PC、微信小程序等最新的技术。

每天提供一个超棒的开源项目包含:物联网平台、WMS系统、ERP系统、OMS系统、知识社区、个人博客系列。

 

欢迎加入【前端开源实验室读者交流群】,群内聊天学习摸鱼为主,不定时会分享一些技术要点和优质学习资源,有一群有趣有料的小伙伴在等你哦!

进群方式:加柚子哥微信回复 进群,按提示操作即可进群。

版权申明:内容来源网络,版权归原创者所有。除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除并表示歉意。


 


 

标签:图片库,模版,生成,开源,view,好用,painter,图片
From: https://www.cnblogs.com/mlgm/p/17767983.html

相关文章

  • 使用开源播放器VLC media player进行视频格式转换
    VLC是一款自由、开源的跨平台多媒体播放器及框架,可播放大多数多媒体文件,以及DVD、音频CD、VCD及各类流媒体协议。---摘自官网一般用它来播放视频,但其实它也可以转换视频.虽然官网没有明说,我估计转换功能是调用了大佬程序员 法布里斯•贝拉(FabriceBellard)的开源项目FFmpe......
  • ubuntu 20.04系统上安装teleport开源堡垒机
    ubuntu20.04安装部署teleport堡垒机简介:Teleport是一款简单易用的开源堡垒机系统,具有小巧、易用的特点,支持RDP/SSH/SFTP/Telnet协议的远程连接和审计管理官方网站地址:https://www.tp4a.com/官方文档地址:https://docs.tp4a.com/官方下载地址:https://www.tp4a.com/downlo......
  • JimuReport积木报表 v1.6.4 稳定版本正式发布—开源免费的低代码报表
    项目介绍一款免费的数据可视化报表,含报表和大屏设计,像搭建积木一样在线设计报表!功能涵盖,数据报表、打印设计、图表报表、大屏设计等!Web版报表设计器,类似于excel操作风格,通过拖拽完成报表设计。秉承“简单、易用、专业”的产品理念,极大的降低报表开发难度、缩短开发周期、节......
  • 【京东开源项目】微前端框架MicroApp 1.0正式发布
    介绍MicroApp是由京东前端团队推出的一款微前端框架,它从组件化的思维,基于类WebComponent进行微前端的渲染,旨在降低上手难度、提升工作效率。MicroApp无关技术栈,也不和业务绑定,可以用于任何前端框架。源码地址:https://github.com/micro-zoe/micro-app官网地址:https://micro-......
  • 为.NET打开新大门:OpenVINO.NET开源项目全新发布
    在AI的应用越来越广泛的今天,优化深度学习模型并进行推理部署已经成为了一门必要的技术。Intel开发的OpenVINO工具包(OpenVisualInferenceandNeuralnetworkOptimization)就是这样一款强大的工具。作为一个开源的工具包,OpenVINO为开发者提供了强大的深度学习模型优化和推理功能,......
  • 这三大爆款开源项目竟出自同一个20人的小公司?
    环界云计算是一家非常小的公司,在成立不足两年的时间里,便孵化出三个备受瞩目的开源项目:Sealos、Laf、FastGPT。而更让人惊叹的是,这家公司只有21名员工。项目概览Sealos:拥有11,000颗Star,这是一个云操作系统,成为了很多开发者的首选平台。Laf:累计获得了接近6,000Star,为开......
  • 基于JT/T1078协议的开源 java视频服务系统
    ​首先,让我们来概述一下JT/T1078协议。JT/T1078协议,也称为"道路交通视频监控系统信息模型与通信协议",是由中华人民共和国交通运输部提出并规范的一种视频服务协议,主要应用于道路交通视频监控系统的设计和实施。其目的是确保视频服务的互操作性、可扩展性和安全性。基于JT/T1078......
  • 基于北斗融合技术的开源智能公交调度系统技术方案
     一、概述智能公交调度系统是一个集成了先进通信技术、数据处理技术和人工智能技术的管理系统,旨在提高公交车的运营效率、减少误点和乘客等待时间,同时提升公交服务水平。 二、技术方案通信技术:该系统主要采用4G/5G无线通信技术,实现数据的实时传输和指令的即时接收。此外,......
  • 为.NET打开新大门:OpenVINO.NET开源项目全新发布
    为.NET打开新大门:OpenVINO.NET开源项目全新发布在AI的应用越来越广泛的今天,优化深度学习模型并进行推理部署已经成为了一门必要的技术。Intel开发的OpenVINO工具包(OpenVisualInferenceandNeuralnetworkOptimization)就是这样一款强大的工具。作为一个开源的工具包,OpenVINO为......
  • 分享教学项目:开源一个对象映射框架
    Maomi.Mapper项目地址:https://github.com/whuanle/Maomi.Mapper注:本项目用于教学目的,性能较差,请勿用于生产环境。MaomiMapper是一个使用表达式树构造生成对象成员映射的框架,即对象映射框架,用于配合笔者其它系列文章,用于教学目的。笔者此系列教程还没有公开,是讲解如何编写各......