html2canvas+jQuery+SpringMVC 实现网页转图片并保存到服务器

简介: 前端使用的是 RequireJS + jQuery 后端使用的是 SpringMVC + MyBatis 涉及资料 html2canvas 官网 将转换后的图片存储服务器的参考 将网页转换为图片 下载插件包 html2canvas 目前最新版是 v-1.

前端使用的是 RequireJS + jQuery
后端使用的是 SpringMVC + MyBatis

更多精彩

涉及资料

  1. html2canvas 官网
  2. 将转换后的图片存储服务器的参考

将网页转换为图片

下载插件包

  1. html2canvas 目前最新版是 v-1.0.0-aplha.12 ,该版本使用的是 ES6 语法
  2. 但本项目使用的是 jQuery ,并且基于 ES5 的语法,所以引入最新版插件时会一直报错 Uncaught (in promise)
  3. 对于没有使用的 ES6 语法的项目,建议下载 2017 年的版本,本文使用的是 v-0.5.0-beta4

调用插件进行转换

  1. 最新版及官网介绍的方法是基于 ES6 的语法结构,对于使用 ES5 语法的项目,需要使用如下方法
  2. 方法第一个参数是传入 DOM 元素,而通过 jQuery 获取的 DOM 元素实际上是一个集合,所以需要通过下标指定具体元素后插件才能正常获取
  3. 方法第二个参数是传入 options 配置,对于 ES5 语法需要使用 onrendered: function(canvas) {...} 来执行回调
html2canvas($diplomaInfoPanel[0], {
  useCORS: true,
  onrendered: function (canvas) {
    // 执行回调
  }
})

在转换时需要解决图片跨域问题

  1. 众所周知 canvas 无法处理跨域图片,那么基于 canvas 实现的 html2canvas 自然也无法处理跨域图片
  2. 如果在插件待转换的 DOM 结构中存在跨域图片,则会转换失败并报错
  3. 虽然插件本身提供了一些处理跨域的方式,但本文是通过 后端代理转发图片 的操作来规避跨域问题的,如下
// 在图片地址直接发起图片请求
<img src="${ctx}/api/diploma/info/${memberDiploma.diploma.hexId}/thumbnail" alt="">
// 控制层接收请求
@RequestMapping("/{diplomaId}/thumbnail")
public void thumbnail(HttpServletResponse response, @PathVariable String diplomaId) {
    diplomaInfoService.getThumbnail(response, diplomaId);
}
// 逻辑层获取到真实图片后通过流的形式反馈到前端
public void getThumbnail(HttpServletResponse response, String diplomaId) {
    try {
          // 提供图片完整地址并转换
        BufferedImage read = ImageIO.read(new URL(CommonHelper.buildDiplomaThumbnail(diplomaId)));
        OutputStream outputStream = response.getOutputStream();

        ImageIO.write(read, "png", outputStream);

        read.flush();
        outputStream.flush();
        outputStream.close();
    } catch (IOException e) {
        logger.error("证书图片代理获取失败", e);
    }
}

将图片保存至服务器

前端将图片转换为 BASE64 格式供服务器接收

  1. 想要将图片传至后端,需要使用 canvas 的 canvas.toDataURL('image/jpeg') 将画布转换为 BASE64 格式的图片
  2. BASE64 格式的图片链接对于后端来说就是一个字符串,所以可以直接接收
onrendered: function (canvas) {
  // 画布转图片链接
  var image = canvas.toDataURL('image/jpeg')

  // 自行封装的 ajax 方法
  $.ts.doAction('/api/diploma/info/save', {
    memberDiplomaId: currentMemberDiplomaId,
    image: image
  }, function () {
      // 异步回调
  }, '', '', '')
}

接收 BASE64 并重新转换为图片格式

  1. 接收前端传入的 BASE64 字符串后,需要通过 org.apache.commons.codec.binary.Base64 将其转换为 byte[] 格式

    • 需要注意的是字符串中 data:image/jpeg;base64, 之后的内容才是有效内容,所以需要在转换时先截取掉这一部分
  2. 转换后直接使用 org.apache.commons.io.FileUtils 保存图片到指定路径即可
private static final String BASE64_PREFIX = "data:image/jpeg;base64,";

public void saveMemberDiplomaImage(String memberDiplomaId, String image) {
    Base64 base64 = new Base64();
    byte[] bytes = base64.decode(image.substring(BASE64_PREFIX.length()));

    String filePath = SOPConstants.UPLOAD_FILE_ROOT_PATH + Constants.DIPLOMA_MEMBER_FILE_PATH + super.getMember().getHexId() + "/";
    String fileName = Constants.THUMB_FILE_PREFIX + memberDiplomaId + Constants.THUMB_FILE_EXTENSION;

    FileUtils.writeByteArrayToFile(new File(filePath + fileName), bytes);
}
目录
相关文章
|
2天前
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
|
3月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
271 0
|
4天前
|
JavaScript
jQuery实现的卡片式翻转时钟HTML源码
jQuery实现的卡片式翻转时钟HTML源码
9 0
jQuery实现的卡片式翻转时钟HTML源码
|
23天前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
63 22
|
13天前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
32 11
|
1月前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
3月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
68 1
【HTML】构建网页的基石
|
3月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
40 1
|
JavaScript 前端开发
25个强大的 jQuery 砌体网页设计作品
砌体(Masonry)是一种网页排布形式,类似于砖砌体、石砌体建造的结构,如下图,左侧是传统的使用CSS浮动实现的布局效果,右图是砌体排 布。砌体布局在不规则的网页内容块布局中非常有用,能够充分利用网页空间,很多网站的照片浏览就采用了砌体形式。
659 0
|
15天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
33 14