palxiao/poster-design

一款漂亮且功能强大的在线海报设计器，图片编辑器，仿稿定设计，适用于多种场景：海报生成、电商产品图、文章长图、视频/公众号封面等。A beautiful online image designer, suitable for various scenarios like generate posters, making design easier!

Hi there 👋

poster-design's Issues

请问下对于褶皱、有纹理的psd支持吗

首先很感谢提供了这么棒的开源项目。问下对于褶皱、有纹理的psd支持吗

[求解] 一个关于moveable拖拽出现的问题，始终不得其解

要实现的功能： 在画布显示区，添加一个moveable的resizeable事件，来实现拖拽后画布高度增加或减少的功能

问题描述： 在画布(html元素)

这个元素上绑定一个moveable，，但是在拖拽时为了保持moveable选框始终在

的底部显示，结果并没有达到预期效果

期望达到的预期： 无论画布是按ctrl+鼠标滚动缩放画布，还是通过最佳效果、25%、50%、75%触缩放等始终将最底部的蓝色拖拽与画布底边保持一致

未达预期情况描述：

测试的以下两种情况，会达到预期效果：

情况一： 当在画布中，放置一个左侧的素材图片进入画布以后，达到预期显示效果，且没有任何问题（即在vuex的dWidgets中有一个type: w-image类型的素材时）
情况二： 当在画布中拖拽一个文字素材，且select激活这个文字后，缩放时也会达到预期效果(必须激活选中文字在进行画布调整)

现在的功能实现方式：

1. 新写了一个文件resizeable.vue ,放在了：src/views/index.vue中，与组件调用放在了一起，为

2. resizeable.vue即为moveable.vue的代码，只是作了一些简化

`

<script lang="ts"> import {defineComponent, nextTick} from 'vue'`

`
import Moveable, {EVENTS} from 'moveable' // PROPERTIES, METHODS,
import MoveableHelper from 'moveable-helper'
import {mapGetters, mapActions} from 'vuex'
// import { setTransformAttribute } from '@/common/methods/handleTransform'
import useSelecto from './Selecto'
import store from "@/store";

export default defineComponent({
setup() {
},
data() {
return {}
},
computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
watch: {
dWidgets: {
handler(val) {
if (store.getters.dWidgets.length > 0) {
if (this.resizeable.target != '.design-canvas') {
this.resizeable.target = '.design-canvas'
}
} else {
if (this.resizeable.target !== '[id="none"]') {
this.resizeable.target = '[id="none"]'
}
}
},
deep: true,
},
updateRect(val) {
this.resizeable.updateRect()
},
},
mounted() {
console.log("resizable....")
// setInterval(() => {
// console.log("setinterval.")
// this.moveable.updateRect()
// }, 3000)
const moveableOptions: any = {
target: document.querySelector('[id="none"]'),
zoom: 0.8,
draggable: false,
clippable: false, // 裁剪
throttleDrag: 0,
resizable: true,
throttleResize: 0,
scalable: false,
throttleScale: 0,
keepRatio: false,
rotatable: false,
throttleRotate: 0,
renderDirections: ['s'], // ['nw', 'ne', 'sw', 'se'] // 'e'
pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
origin: false,
defaultGroupOrigin: '0% 0%',
// 样式相关
rotationPosition: 'bottom',
className: 'resize-moveable-style',
// -- 吸附对齐 Start --
snappable: true,
elementGuidelines: [],
verticalGuidelines: [],
horizontalGuidelines: [],
snapThreshold: 4,
isDisplaySnapDigit: true,
snapGap: false,
snapElement: true,
snapVertical: true,
snapHorizontal: true,
snapCenter: false,
snapDigit: 0,
triggerAblesSimultaneously: true,
}
const resizeable = new Moveable(document.body, moveableOptions)
this.resizeable = resizeable
`

`
resizeable
.on('resize', (args: any) => {
const {target, width, height} = args
store.commit('setShowMoveable', false)
// 设置画布
store.dispatch('updatePageData', {
key: 'height',
value: height,
pushHistory: true,
})

      store.dispatch('updatePageData', {
        key: 'width',
        value: width,
        pushHistory: true,
      })
      target.style.width = width + "px";
      target.style.height = height + "px";

      // const pageElement = document.querySelector("#page-design")
      // pageElement?.scrollTo( 0, document.body.scrollHeight)

    }).on('resizeEnd', () => {
  store.commit('setShowMoveable', true)
})

},
async created() {
await nextTick()
const Ele = document.getElementById('page-design')
Ele?.addEventListener('scroll', () => {
this.resizeable.updateRect()
})
},
methods: {
...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
},
})
</script>

<style lang="less"> @import url('./style/index.less'); </style>

`

4. 就是通过监听到调整画布以后，执行resizeable.vue中的watch->updateRect()方法，但是moveable里的updateRect并没有效果, 可是当执行鼠标滚动后，会触发代码中的
   · Ele?.addEventListener('scroll', () => {
   this.moveable.updateRect()
   })
   `代码，结果就出现了预期的效果
5. 测试的时候发现每调用一次 watch->updateRect()方法时，显示在画布最下面的那个底部拖拽所在的位置，就是前一步
   的高度， 好像是慢了一步，并没有实时显示在当前的画布高度下方，从而没有希望的效果

版本迭代

分支: feature-vue3

目标：

• Options API 更换为 Composition API
• VueX 更替为 Pinia

二维码元素，在通过修改数值尺寸的时候，选中框的高度或者宽度没有保持比例

你好 想找你做一个类似这样的东西

想找你做一个适用于长图制作的海报编辑器 详情页 店铺装修这种的 方便的话咱们加下微信联系 zswq741

你好，请问什么时间会有文字特效编辑的功能呢？

我在测试环境中看到有文字特效的编辑功能，但是下载源码运行后却没有此功能 ，请问这个功能将会在什么时间发布呢 @palxiao @rayadaschn

能直接本地预览模板生成图片吗？

moveable的位置如何跟随数据变化

然后尝试了图片的 发现moveable的选择框有跟随数据保持一致。
没有发现moveable关联位置的地方，这块是怎么实现的呢。

另外我又尝试了笔刷（svg），在右侧编辑区 改动笔刷的位置尺寸的位置和宽高，却发现未出现跟随效果。

期待回复

样式能支持Dark模式吗

早上好，
样式能支持Dark模式吗？现在主流的设计软件几乎默认都是Dark模式 ：)

有无可能导出html？

现在的方案导出是canvas2img吗？
有无可能到处一个html，并且保持里面必要的style，比如：文字居中

对元素缩放时，选中框有几条边超出边框了，是bug？

点击文字编辑颜色变成了白色

拉下来最新的代码，启动后测试，发现编辑文字，进入页面是正常的。点击文字元素，文字就变成了白色。
自己捋了下代码，designBoard.vue中的handleSelection处理选中元素的逻辑。下图是打印的信息，在选中之前就变了颜色。实在找不到问题所在。求助

点击文字widget，颜色会消失；还有为什么下载作品不用html2canvas而要用服务器浏览器，是因为想做权限吗？

点击文字widget，颜色会消失；还有为什么下载作品不用html2canvas而要用服务器浏览器，是因为想做权限吗？

数据类型支持图表

类似canva， 数据类型增加图表。一般日报周报只有数据变动，图表模板都是固定的。

关于PSD.JS一行文本多种字体解析的问题

问题描述： 上传的PSD一行文本中，存在不同的字体，解析出来以后只有一种字体效果，这样就没有办法实现一行文本多种字体、多种颜色的变化效果。

期望实现的效果： 想要实现的效果如下（也就是对一行文本中任意文字修改颜色和字体）：

查阅查卷资料，有人说PSD.JS解析只支持单字体， 但是响应结果里，却有names字段，本来打算使用lengthArray与names进行一个对应关系，结果是无法匹配的，这个方法就行不通。

如果PSD.js无法解析此种多字体效果，基于咱们现在这套系统实现一行文本可实现不同字体，不同颜色，不同大小，有什么好的实现方法吗

截图服务能否放在前端，采用canvas的toDataUrl接口生成图片？

如果放在后端，对服务器要求高，且速度慢

移除项目中使用稿定 CDN 的资源 和 稿定 API

请把项目中访问稿定 CDN 的资源 和 API 改成你自己的, 谢谢!

where is the license of this project?

linux部署node出图时,puppeteer出现Multiple targets are not supported in headless mode错误

所遇问题：
node出图编译完成后，项目运行下载出图时，报出错误： Error: Failed to launch the browser process!
0|server | [0106/164159.036587:ERROR:chrome_main.cc(164)] Multiple targets are not supported in headless mode.

操作步骤：

1. 我是根据文档中安装goole-chrome-stable, 又配置了： executablePath: /usr/bin/google-chrome-stable, 安装的google-chrome我发现有好几个()：


2. 安装完成的最新版本是： google-chrome-stable-120.0.6099.199-1.x86_64 already installed

3. screenshots在编译完成后，将server.js放在了screenshots/node_module/server.js下，然后执行: pm2 start node_modules/server.js ，点击下载出图的时候，就报了 Multiple targets are not supported in headless mode

代码里只修改了： executablePath: /usr/bin/google-chrome-stable, headless: true,  具体参数如下：

browser = await puppeteer.launch({
headless: true,
executablePath: isDev ? null : executablePath,
ignoreHTTPSErrors: true, // 忽略https安全提示
args: ['–no-first-run', '–single-process', '–disable-gpu', '–no-zygote', '–disable-dev-shm-usage', '--no-sandbox', '--disable-setuid-sandbox', --window-size=${width},${height}], // 优化配置
defaultViewport: null,
})

也查过其他文档，目前没有找到为什么会出现这个问题，请求帮助。

文字素材是怎样生成的？

如上

服务端的并发量

想问下 puppeteer启动屋头浏览器还是比较占内存的，有测试过已知服务器内核和内存的情况下的服务端截图的并发量吗？

项目优化等常见问题

• 域名更替后，中文文档网站 等打开失败
• 仓库建议 Discussion 讨论，便于更好的提问，如可探讨是否加入 i18n 国际化等。项目流程化也更为清晰：Discussion -> Issues -> Pull requests

手动进 screenshot 目录安装依赖并启动服务

安装依赖也是执行这个命令吗？npm run prepared
还是执行 npm install

单行文本下载作品的图片变成多行了

希望服务端渲染的时候能继续保持单行文本

你好，非常感谢，无意中发现了整个项目，请问接下来有打算实现文字特效吗？

你好，非常感谢，无意中发现了整个项目，请问接下来有打算实现文字特效吗？

It may be damaged or use a file format

下载图片时，报这个错：It may be damaged or use a file format that Preview doesn’t recognize.
本地的开发环境没有问题，部署到服务器后便是如此，请抽时间看下^_^
我只部署了前端，没有部署图片生成服务
感谢。

最终的合成图片能否纯前端实现？

我看系统最终合成图片的方案是通过chrome的无头方式实现的，我看你在文档中也提到了Html2Canvas，想请问下，能否用更轻量级html2canvas方案？是否由于html2canvas的生成效果不太好？

能否补一下lock文件

作者可以补下lock文件吗，目前依赖的版本不受控。盼望😄

这确定不是抄袭vue-fabric-editor？开源也要注明一下从哪来的灵感吧，未免也太不尊重作者。

无法上传资源，或无法登录

大佬好，通过新建项目以后，选择我的-资源管理-所有图片都为failed，选择图片上传提示成功，但是依旧无法看到，且没有看到日志信息，请问如何处理？看了下在线版本，似乎是没有微信登录导致的？

以下是我新建项目的方式：
最后npm run serve后无法将端口映射到外，所以换了npx，不知道是否是这个原因？同时，我新使用node16.8.1生成了一个docker镜像，部署后也是同样的问题。

期盼解答，十分感谢

FROM node:16.18.1 AS builder
RUN npm config set registry https://registry.npmmirror.com
RUN apt-get update && apt-get -y dist-upgrade
WORKDIR /app
COPY ./poster-design /app
RUN  node -v && npm install && npm i ts-node-dev -D && npm i --save puppeteer && npm i --save images
EXPOSE 3000
CMD ["npm", "run", "prepared"]
CMD ["npx", "vite", "serve","--host", "0.0.0.0"]

发现一些bug和体验不足的地方

研究下在线设计项目源码 也修改了一些bug 可能是因为没有研究全部代码的原因 总是改了这里那里又出现bug，所以暂时没提交。
我先记录下我发现的体验及bug汇集下：
1.每加载一个模板后 首次直接拖动画布里模板的元素拖不动 需要先点一下元素才能拖动该元素
2.同一个元素点一下 属性面板重新渲染了下
3.按下空格键再鼠标滚轮就能放大或缩小 按住鼠标左键能拖动画布体验好些
4.点击裁剪完成后再拖动文字文字不能等比例缩小或放大了
5.《早安追梦人》里面迅排设计 让设计更简单 编辑状态敲空格 退出编辑后文字退回去了
6.图片进入裁剪中 所有图层自动加了把锁 这样有没冲突哦
7.能不能框选某个元素 比如图片 框选单个图片的时候 弹出图片属性面板就好了
8.没得剪切的功能
9.群组后复制粘贴 top和left没加30
10.历史记录

图片合成后端是用什么来实现的

保存数据合成图片后端是采用的怎样的方式, 有没有项目参考一下 大佬

你好 请问下rembg是在后台使用的吗? 前端项目里我没发现有用到的地方

你好 请问下rembg 是在后台使用的吗? 前端项目里我没发现有用到的地方, 想研究下前端是否能做到删除图片背景?

在点击下载时，一共会有6个tab打开

很赞！
我的问题是：在点击下载时，一共会有6个tab打开，且只有最后一个正常访问，这是什么问题？
感谢！

[求解] 关于draw.vue生成截图下截图片时对【字体解析】的几个疑惑

问题描述： 前端调用的API已经变更成我们后端开发的地址了，但是测试下载图片的时候发现，所设置的字体还是默认的字体， 后来发现是因为draw.vue文件有对字体进行接口调用 ，位置是在： src/utils/widgets/loadFontRule.ts 中 const result = await api.material.getFontSub(params, extra)

问题1：(主要问题)
该接口(api.material.getFontSub(params, extra))描述的是提取字体子集， 需要传参数: content动态生成result，请问咱们后端对该接口逻辑是如何实现的？ 就是对{ "code": 200, "result": "data:font/woff;base64, ...}中result返回结果的实现逻辑。能否贴一下咱们后端对这个实现的代码呢？

问题2：(次要问题)
接口调用的是： https://palxp.cn:8887/design/font_sub?font_id=206822&id=528&content=%E6%B5%8B%E8%AF%95，不传参数font_id接口返回的是空结果集，而传递font_id值时，返回的是形如：{ "code": 200, "result": "data:font/woff;base64, ...} 的数据， 那么这个font_id对应localStorage里的fonts中的oid, 请问这个font_id代码的意思是什么，填与不填是否有什么其他影响？

问题3：(次要问题)
最终代码调用了document.head.innerHTML += fontStyles，将所有字体的font-face追回到标签里：

由于问题1的逻辑我没有实现，所以直接测试的时候将字体改成了字体的url路径也是可以的(只是有网络的延迟，解析字体要稍等片刻才会有解析),

请问咱们现在代码里转为了base64，和直接使用URL作为解析字体的font-family, 这两个是否有区别？

Error: ENOENT: no such file or directory, stat 'D:\project\poster-design\screenshot\static\13-screenshot.png'

您好 自己本地启动的服务 自己的api但是 下载图片时提示没有下载成功。幸苦回复

交互体验优化建议

在线体验中，切换不同模板无论是否更改过都要弹窗确定，个人感觉这样的体验可以优化一下；只是小小的建议，本人还没有看具体代码实现

大神，您好，请问微信的登录代码能开源学习学习么，搞了好久有问题，求开源学习学习，膜拜大神

大神，您好，请问微信的登录代码能开源学习学习么，搞了好久有问题，求开源学习学习，膜拜大神

接口API参考文档的链接打不开

有后端代码吗？

通过Docker部署无法访问3000

大神您好！

docker run --rm -it -p 3000:3000 -p 7001:7001 node:18.16.1 /bin/bash


git clone https://github.com/palxiao/poster-design.git

cd poster-design
npm config set registry https://registry.npmmirror.com

npm run prepared

npm run serve

我执行以上命令后输出如下

root@fc1da467874b:/poster-design# npm run prepared

> [email protected] prepared
> npm i && cd screenshot && npm i

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@achrinza/[email protected]',
npm WARN EBADENGINE   required: { node: '8 || 10 || 12 || 14 || 16 || 17' },
npm WARN EBADENGINE   current: { node: 'v18.16.1', npm: '9.5.1' }
npm WARN EBADENGINE }

up to date in 3s

up to date in 1s

24 packages are looking for funding
  run `npm fund` for details

  vite v2.9.16 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 693ms.

devServer start on port:7001

我在本地机器上访问服务器地址:3000没反应。而访问7001端口可以看到服务端有GET /的请求。请问哪里出问题了？

Failed to resolve import "./base" from "src/router/index.ts". Does the file exist?

[vite] Internal server error: Failed to resolve import "./base" from "src/router/index.ts". Does the file exist?

有四个ts文件因文件名大小写问题导致项目启动报错，更名后启动正常。

是否有点击弹窗登录的计划 现在token是写死的

是否有点击弹窗登录的计划 现在token是写死的

请问有没有打算做多画布的功能

你好，请问有没有打算做多画布的功能，比如优惠券有正版两面。

能实现类似稿定设计的智能生成模板吗，AI 一键生成海报。但是感觉稿定设计看着像只是把你输入的文字和图片给加到模板上，并不是 AIGC 的样子

跑不起来

nodejs 用 V16 报错没有 src/config,老哥根本跑不起来啊。
试了17 好了项目直接起不来了