首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >甩锅技能:让前端他们自己生成海报

甩锅技能:让前端他们自己生成海报

作者头像
小锟哥哥
发布于 2022-12-05 06:11:11
发布于 2022-12-05 06:11:11
77000
代码可运行
举报
文章被收录于专栏:GoLang全栈GoLang全栈
运行总次数:0
代码可运行

今天有同学私信我说,他们的前端让他后端生成海报。

理由:因为他们前端不会绘制海报。

这同学呢,又不大会前端知识,希望我能帮他甩锅。

哈哈,我最喜欢的事就是甩锅,这篇文章请查收!

1、html2canvas

如果不会 canvas 绘图,那这个库就非常适合你,你只需要正常的排版传统 div+css 就OK,随后使用这个库,一行代码搞定。

官方地址:https://html2canvas.hertzen.com/

GitHub地址:https://github.com/niklasvh/html2canvas

这库只做了一件事,就是把 Dom 里面的元素复刻到 canvas 里面,只要到 canvas 后,剩下的导出图片就非常容易了。

大部分样式布局这个库都支持,唯一需要处理的就是如果里面使用到图片,需要自行处理跨域问题。

这里再贴上怎么处理 canvas 转图片的后续:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Html2canvas(document.querySelector("#poster")).then(canvas => {
 // base64 编码的图片
  const imageBase64Url = canvas.toDataURL("image/png", 1.0);
 // 转换成 Blob 类型
  const imageBlob = self.dataURItoBlob(self.posterUrl);
 // 添加 canvas 到 body
  document.body.appendChild(canvas)
});

dataURItoBlob(base64Data) {
  var byteString;
  if (base64Data.split(',')[0].indexOf('base64') >= 0){
      byteString = atob(base64Data.split(',')[1]);
  }else{
      byteString = unescape(base64Data.split(',')[1]);
  }
  var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], {type: mimeString});
}

如果直接显示可以使用 imageBlob 变量,如果是要上传可以使用 Blob。

2、vue-canvas-poster

如果你喜欢配置型的,想直接在 canvas 里面绘制那种,同时又使用的 Vue,就可以使用这个库。

官网地址:https://sunniejs.github.io/vue-canvas-poster/#/

可以像写配置一样的绘制海报。

如果是小程序开发,也有类似的库,参考:https://github.com/Kujiale-Mobile/Painter

这两个的思路是一样的,网上有非常多这类的库,这两个作者使用过,体验比较 nice,所以比较推荐。

3、总结

这是一个前后端分离的时代,也是考验技术人甩锅能力的时代。

一个会甩锅的后端,一些前端知识多少也得会一些的,否则在甩锅的时候,容易甩不掉。

最后,祝大家前后端相处融洽!

你学废了么?

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-10-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 GoLang全栈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
hutool官网(hutool好用吗)
看本篇文章前,建议先对java源码的日期和时间有一定的了解,如果不了解的话,可以先看这篇文章:
全栈程序员站长
2022/07/28
18.6K0
hutool官网(hutool好用吗)
Hutool工具包-常用开发工具类(让代码更简洁)
Java微观世界
2025/01/20
6450
Hutool工具包-常用开发工具类(让代码更简洁)
带你认识Hutool工具包
Hutool 是一个小而全的 Java 工具类库,通过静态方法封装,降低相关 API 的学习成本,提高工作效率,使 Java 拥有函数式语言般的优雅,让 Java 语言也可以 “甜甜的”。
程序员Leo
2023/08/07
1K0
带你认识Hutool工具包
4hutool实战:DateUtil-格式化时间[通俗易懂]
java的SimpleDateFormat线程不安全出问题了,虚竹教你多种解决方案(万字长文*建议收藏)
全栈程序员站长
2022/07/01
4.3K0
一文带你入坑JDK8的新日期时间类 LocalDate、LocalTime、LocalDateTime
参考 https://blog.csdn.net/duan196_118/article/details/111597682 https://blog.csdn.net/qq_24754061/article/details/95500209 https://xijia.blog.csdn.net/article/details/106007147
时间静止不是简史
2023/02/23
5.2K0
一文带你入坑JDK8的新日期时间类 LocalDate、LocalTime、LocalDateTime
LocalDateTime、Date时间工具类
参考:Date、LocalTime、LocalDate、LocalDate-时间操作工具类_Hatsune_Miku_的博客-CSDN博客
CBeann
2023/12/25
3760
java最全最常用的日期工具类(随时补充)
@Slf4j public final class DateUtils { private DateUtils() { } private static final String FORMAT_YYYYMMDDHHMMSS = "yyyy-MM-dd HH:mm:ss"; public static final String FORMAT_YYYY_MM_DD = "yyyy-MM-dd"; public static final String FORMAT_
疯狂的KK
2023/04/10
1.3K0
日期工具类-操作字符串和Date、LocalDate互转,两个日期的时间差等
避免重复造轮子,相关方法基于hutool日期时间工具封装并做部分增强。需要先引入如下坐标
共饮一杯无
2022/11/28
1.4K0
【最爽的日期工具包LocalDate·超爽,超实用】(Java8版本)
需要的包: import java.time.DayOfWeek; import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; import java.time.format.DateTimeFormatter; import java.time.temporal.ChronoUnit; import java.time.temporal.TemporalAccessor; import j
红目香薰
2022/11/28
7250
JDK8中新的日期时间工具类真的很好用,还不清楚的快进来看看吧,建议收藏
  最近刚好有空给大家整理下JDK8的特性,这个在实际开发中的作用也是越来越重了,本文重点讲解下新的日期时间API。
用户4919348
2021/06/11
1.7K0
Scrapy笔记三 自动多网页爬取-本wordpress博客所有文章
学习自http://blog.csdn.net/u012150179/article/details/34486677
十四君
2019/11/27
8620
有了它,Java语法也可以变得甜甜的
Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以“甜甜的”。
wangweijun
2020/02/14
1.2K0
APP热搜榜接口提供 --- 百度
目的地-Destination
2024/08/07
2991
APP热搜榜接口提供 --- 百度
JDK8时间工具类
JDK8添加了java.time包,提供了很多方便。 用得比较多的几个类: Instant 在时间线上模拟单个瞬时点 Duration 以秒和纳秒为单位模拟一个数量或时间量。可以使用其他基于持续时间的单位访问它,例如分钟和小时 LocalDate 表示ISO-8601日历系统中没有时区的日期,例如 2019-03-31 LocalTime 表示ISO-8601日历系统中没有时区的时间,例如 16:50:30 LocalDateTime 表示ISO-8601日历系统中没有时区的日期时间,例如 2019-03-31T10:15:30 其中一些方法使用如下:
GreizLiao
2019/09/29
9470
【Java 基础篇】Java Date 类详解:日期和时间操作的利器
在 Java 编程中,处理日期和时间是一项常见但复杂的任务。Java 提供了许多用于日期和时间操作的类,其中 java.util.Date 类是最早的日期和时间类之一。然而,它存在一些问题,因此 Java 8 引入了 java.time 包,其中包含了 java.time.LocalDate、java.time.LocalTime 和 java.time.LocalDateTime 等新的日期时间类。这些新类提供了更多的功能和更好的可读性,使日期和时间处理变得更加方便。本篇博客将详细介绍 Java 中的 java.time 包,重点关注 LocalDate、LocalTime 和 LocalDateTime 类的使用。
繁依Fanyi
2023/10/12
1.5K0
【Java 基础篇】Java Date 类详解:日期和时间操作的利器
手机移动端日期时间控件lcalenda
http://618cj.com/2017/01/16/%E6%89%8B%E6%9C%BA%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%97%A5%E6%9C%9F%E6%97%B6%E9%97%B4%E6%8E%A7%E4%BB%B6lcalenda/
全栈程序员站长
2022/08/31
2K0
对接声网rtc-restful-api
阿超
2023/11/18
2430
求求你了,不要再自己实现这些逻辑了,开源工具类不香吗?
最近公司来了一批实习生,小黑哥负责带一个。这位小师弟说实话,基本功很扎实,做事也非常靠谱,深得小黑哥真传。
andyxh
2020/05/19
9960
探索java中的hutools工具库
Hutools是一个Java工具库,提供了丰富的工具模块,可以帮助开发人员简化日常开发任务,并提高工作效率。下面是一些在工作中常用的Hutools工具模块,会用到一些时间处理。或者一些ID生成。获得一些字符判断等非常常用的一些工具类。Hutools都做了一个非常漂亮的简化处理。也是新手值得非常学习的编码工具类
查拉图斯特拉说
2024/01/22
1.1K2
Java8时间方法LocalDate和LocalDateTime工具类
目的地-Destination
2023/10/12
5640
推荐阅读
相关推荐
hutool官网(hutool好用吗)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验