设计海报，但是又嫌ps制作太繁琐，推荐10个简单实用的在线平面设计网站，用过就离不开的那种！就算是小白，也能设计出精美时尚的海报。

01 创客贴

https://www.chuangkit.com/?dontjump=1

创客贴是一款多平台（Web、Mobile、Mac 、Windows）极简图形编辑和平面设计工具，包括创客贴网页版、 iPhone、iPad、 桌面版等。从功能使用上分，创客贴有个人版和团队协作版，提供图片素材和设计模板，通过简单的拖拉拽制作就可以设计出海报、PPT、名片、邀请函等各类设计图。

02 稿定设计

https://www.gaoding.com/

主要提供在线抠图技术支持，在线平面海报设计支持功能，提供可替换素材模板进行编辑。

03 懒设计

https://www.fotor.com.cn/

是一款非常简单又实用的作图神器，Fotor懒设计网站上有数万个原创、可商用的、精美的海报模板，题主想自助在线制作海报，可以选择模板，然后简单进行修改，不到3分钟就可以快速搞定海报设计。

04 FotoJet

https://www.fotojet.com/cn/

提供大量的富有设计感的海报模板，从音乐主题到时尚主题应有尽有。选择你喜欢的模板，结合你自己的想法，尽情DIY你的海报。

05 图帮主

https://www.tubangzhu.com/cpzt/1.html

在线海报制作平台，界面简洁清新，提供多种模板修改制作，设计感较强，部分模板需要付费才能使用。

06 canva

https://www.canva.cn/

无论你是设计小白还是专业人士，团队合作还是自己使用，创建账户，让Canva成为你的好帮手！

07 菲果

https://www.ficgra.cn/

是一款可以免费使用的在线平面设计工具。菲果有大量的平面设计模板，包括海报、宣传单、折页等。所有模板均由设计师精心设计，针对不同的行业和情景制作了不同风格的海报模板。使用海报模板，只需修改海报宣传相关内容，即可导出保存，快速方便。

08 图怪兽

https://818ps.com/

是一个在线ps图片编辑器,它相当于ps精简版,可提供图文在线编辑、在线ps照片处理、在线拼图、在线设计、平面设计、海报制作、在线图片处理等功能。

09 MAKA

https://www.maka.im/muban

在线创作工具：涵盖H5设计、单页（长图文）设计和海报设计的在线创作功能，用户简单拖拽即可完成邀请函、广告、活动宣传、招聘招生、节日贺卡等的内容设计。

10 ARKIE

https://www.arkie.cn/welcome

是一款几乎零要求、多尺寸输出、拥有免费图片库、秒级自动生成图文作品的智能设计助手，在制作上极为简单，三个步骤完成，分别是选择尺寸、添加文字、选择背景等。

素材分享

好啦，今天的讲解到这里就结束啦，感兴趣的同学一起来学习呀

平面插画素材应有尽有

有需要的直接找我私信发“插画素材”或者“设计素材”获取：

网页上生成一个便于用户分享的精美海报，或者对于网页内容生成截图，现在已经是一个非常常见的需求，现在怎么实现呢？

生成海报很麻烦

生成网页截图和海报一般都有两种做法，一是服务端使用 GD 库生成，二是前端使用 Canvas 生成，但是这两种方法都比较麻烦。

服务端通过 GD 库去生成的话，首先要去查 GD 库相关的大量函数，然后图片的坐标，文字的换行等等都要仔细去算，一点点修改，都要重新算一遍，非常难受。

而前端使用 Canvas 生成的话，就需要熟悉 Canvas 的语法，它的 API 比较复杂，有大量的方法和属性，让很多希望通过 Canvas 画图的同学望而却步。

那么有没有什么简单的方法生成海报呢？不需要学习太多新知识，利用现有的知识就实现的呢？

html2canvas

有的，html2canvas 就是这样的一个 Javascript 库，无需大量学习，只需要会 HTML 和 CSS 即可，html2canvas 可以把网页元素或者整个网页转换为一个 Canvas 对象或者图片。

html2canvas 是通过在浏览器端解析 HTML 和 CSS 来实现这个功能，不需要任何服务器端的支持，然后也不需要对 Canvas 相关的方法深入的学习，只需要懂简单的 HTML 和 CSS 即可。

总结一下，下面是 html2canvas 的一些主要优势：

1. 无需后端支持：html2canvas 完全在客户端运行，无需任何服务器端的支持。这使得它非常适合在各种环境中使用，包括静态网页和单页应用。
2. 灵活且强大：你可以指定截图的元素，包括整个网页或者特定的 DOM 元素。此外，html2canvas 还支持多种 CSS 属性，包括 z-index、overflow、CSS transforms 和 CSS filters 等。
3. 跨浏览器兼容性：html2canvas 支持所有主流的浏览器，包括 Chrome、Firefox、Safari 和 IE11+。
4. 丰富的功能：html2canvas 提供了一系列的选项和API，使得你可以对截图过程进行深度定制，包括修改截图的尺寸、忽略特定元素、添加背景颜色等。
5. 源码开放：html2canvas 是开源的，你可以查看和修改它的源代码，甚至为它贡献代码。

但是也需要注意的是，由于 html2canvas 是通过解析 HTML 和 CSS 来生成截图的，所以它无法完美地复制所有的渲染效果，特别是一些复杂的 CSS 样式和动态内容。

几行代码

首先加载 html2canvas 对应的 JavaScript 库：

<script type='text/javascript' src='https://cdn.staticfile.org/html2canvas/1.4.1/html2canvas.js'></script>

然后选择对应的网页元素生成屏幕截图：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

就是这么简单，几行代码就实现。

目介绍

公司拉新和分享活动少不了海报的使用，考虑到生成海报是通用工具以及需要处理前端生成海报的各种兼容性问题，我们开发了此项目。一般海报的生成可由客户端生成，也可由服务端生成，该项目是通过 node 服务组合背景、二维码、图片、文字等生成海报图片。

服务端生成海报优缺点

优点：

• 兼容性好，如前端生成时 canvas 经常出现的非同源图片跨域问题不会出现
• 前端开发简单，对于前端来说就是一个参数较多的接口
• 可以做缓存，相同的参数不必每次生成（本项目采用阿里云 oss）

缺点：

• 服务器压力大，一个服务需要同时对多个客户端
• 对于个别的样式支持较差，如果想做到支持更多样式属性，开发成本较高

缺点的完善

上文说到服务端生成的缺点中，最主要的是服务器压力。一旦同时生成的人数或者海报元素过多，就会造成生成海报时间过长、生成海报超时等问题。但是由于我们事先不可能知道有多少用户会使用海报功能，所以使用 FC（函数计算）弹性部署，可以解决这一问题，也不会浪费资源。

阿里云 FC：https://help.aliyun.com/document_detail/52895.html

海报生成设计流程

海报设计时，支持背景图、二维码、文字、图片，生成时先会将请求参数 md5 和 oss 缓存下的 md5 进行比对：

若结果一致则直接根据 md5 找到对应的海报返回；

若 md5 不存在，则会走生成流程，生成海报并将参数 md5 与海报 url 缓存。

• 利用参数 md5 取缓存文件主要代码部分：

其中，Client 为 ali-oss 实例对象，根据是否查询到相应的文件，直接返回至客户端。

• 重新生成海报主要代码：

md5 缓存未取到文件时，则走改代码重新生成海报。Pinterest 为自己封装的一个方法，其使用了一些 npm 包进行数据处理转为图片二进制流，再利用 sharp（node 高性能图片处理）进行合成。这边使用了以下几种包处理数据，分别是：text-to-image（处理文字）、qrcode（二维码）。

• Pinterest 核心代码如下：

使用方式

总结

该项目为 node + fc 部署的海报服务，目前使用感受为第一次生成海报的时间略长，第一次之后速度则会快许多（一般海报生成都会有 loading）。node 开发的服务可以由前端自行修改和优化，对前端工程师来说不依赖于后端，是一件非常自豪的事情。