Giter Club home page Giter Club logo

lvhuaisheng / gzm-design Goto Github PK

View Code? Open in Web Editor NEW
393.0 8.0 96.0 1.27 MB

🚀🚀🚀一款漂亮易用的在线设计器,支持PSD导入、PSD解析,可用于海报设计器、广告设计器、logo设计器、AI创作图片合成器等。常用于生成二维码海报,图片海报,二维码推广海报,图片处理,名片设计,电商产品图,节假日海报等。http://gzm-design-doc.guozimi.cn/

Home Page: http://gzm-design-doc.guozimi.cn/

License: MIT License

JavaScript 0.21% HTML 0.03% Vue 68.54% TypeScript 28.54% Less 2.68%

gzm-design's Introduction

Gzm Design

MIT License Arco Design Vue Vite

GitHub Repo stars Gitee Repo stars

简介

Gzm Design是一个免费开源的海报设计器。使用了最新的vue3,vite4,TypeScript等主流技术开发,开箱即用。

文档

预览

image

功能/计划

Tips: 🕙筹划中 🔲筹备中 🚧进行中 ✅已完成

  • ✅ PSD导入
    • ✅ 支持RGB色彩模式的PSD文件导入
    • 🕙 支持CMYK色彩模式的PSD文件导入及色彩模式转换
    • ✅ 分组处理
    • ✅ 层级处理
    • ✅ 图片解析
    • ✅ 剪切蒙版
      • ✅ 单层蒙版
      • ✅ 连续多层蒙版
    • ✅ 文字解析
      • ✅ 普通文本
      • ✅ 富文本
      • 🕙 效果/特效处理
    • ✅ 字体加载
    • 🕙 智能对象
  • ✅ JSON导入
  • ✅ 多页面支持
  • ✅ 快捷键支持(部分功能)
  • ✅ 模板导入
  • ✅ 图层管理
  • ✅ 标尺工具
  • ✅ 钢笔工具
    • ✅ 默认画笔样式
    • ✅ 自定义画笔样式
  • ✅ 元素编辑
  • ✅ 预览
  • ✅ 文件下载(JSON / PNG / JPG / WEBP)
    • ✅ 整个画布导出
    • ✅ 指定元素导出
  • ✅ 画布缩放、拖动模式
  • ✅ 边框描边(纯色、线性渐变、径向渐变、图片)
  • ✅ 填充(纯色、线性渐变、径向渐变、图片)
  • ✅ 混合模式、旋转、透明度
  • ✅ 文本字体、粗细、大小、下划线、中划线、倾斜、行距、字距、内边距、换行规则
  • ✅ 文本超出控制、自定义超出显示
  • ✅ 多元素打组、拆分组
  • ✅ 画布尺寸修改、多背景填充
  • ✅ 元素超出组裁剪/显示
  • ✅ 富文本支持
  • ✅ 组内放置(拖入)
  • ✅ 遮罩功能
  • ✅ 组内蒙版
  • ✅ 组内擦除功能
  • ✅ 外阴影、内阴影
  • ✅ 撤销、恢复功能
  • 🔲 图片裁剪
  • 🔲 图片滤镜
  • 🕙 SDK封装
  • 🕙 PSD导入插件化封装
  • 🕙 针对标尺线、元素的自动吸附功能
  • ✅ 二维码工具
  • ✅ 条形码码工具
  • 🕙 AI抠图
  • 🕙 AI图生图、自动补全
  • ✅ 标尺线npm包封装

安装使用

  • 获取项目代码
# GitHub
git clone https://github.com/LvHuaiSheng/gzm-design.git

# Gitee
git clone https://gitee.com/sourcenet/gzm-design.git
  • 安装依赖
cd gzm-design

pnpm install
  • 运行
pnpm dev
  • 打包
pnpm build

更新日志

CHANGELOG

捐赠

如果觉得还不错,请作者喝杯咖啡吧 ☺

微信交流群

如何贡献

非常欢迎你的加入!提一个 Issue 或者提交一个 Pull Request。

Pull Request:

  1. Fork 代码!
  2. 创建自己的分支: git checkout -b feat/xxxx
  3. 提交你的修改: git commit -am 'feat(function): add xxxxx'
  4. 推送您的分支: git push origin feat/xxxx
  5. 提交pull request

Git 贡献提交规范

  • 参考 vue 规范 (Angular)
    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

致谢

特别感谢以下项目和贡献者:

友情赞助商

开源协议

gzm-design's People

Contributors

lvhuaisheng avatar minicherry avatar shuangxunian avatar sourcenetc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gzm-design's Issues

json 数据回显

1、通过后端返回json数据 回显出对应画布内容

2、可以直接生成图片

oos 域名不支持 https 导致模板资源加载失败的问题

20240820095117

尝试自部署了一下,由于基于 https 方式访问,发现模板中存在许多访问 oss.guozimi.cn 域名的图片资源,由于该域名不支持 https,会导致加载失败,如图所示。

是否可以将该域名配置一下 SSL 证书,支持一下 https 呢。
如果是证书方面存在问题,我这里有一篇基于 acme 免费生成与续期泛域名SSL证书的实践记录可参考一下:
https://lzw.me/a/acme-sh-dnspod-api-nginx.html

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.