前端使用的是 RequireJS + jQuery
后端使用的是 SpringMVC + MyBatis
涉及资料
将网页转换为图片
下载插件包
- html2canvas 目前最新版是 v-1.0.0-aplha.12 ,该版本使用的是 ES6 语法
- 但本项目使用的是 jQuery ,并且基于 ES5 的语法,所以引入最新版插件时会一直报错
Uncaught (in promise)
- 对于没有使用的 ES6 语法的项目,建议下载 2017 年的版本,本文使用的是 v-0.5.0-beta4
调用插件进行转换
- 最新版及官网介绍的方法是基于 ES6 的语法结构,对于使用 ES5 语法的项目,需要使用如下方法
- 方法第一个参数是传入 DOM 元素,而通过 jQuery 获取的 DOM 元素实际上是一个集合,所以需要通过下标指定具体元素后插件才能正常获取
- 方法第二个参数是传入 options 配置,对于 ES5 语法需要使用
onrendered: function(canvas) {...}
来执行回调
1 |
|
在转换时需要解决图片跨域问题
- 众所周知 canvas 无法处理跨域图片,那么基于 canvas 实现的 html2canvas 自然也无法处理跨域图片
- 如果在插件待转换的 DOM 结构中存在跨域图片,则会转换失败并报错
- 虽然插件本身提供了一些处理跨域的方式,但本文是通过 后端代理转发图片 的操作来规避跨域问题的,如下
1 |
|
1 |
|
1 |
|
将图片保存至服务器
前端将图片转换为 BASE64 格式供服务器接收
- 想要将图片传至后端,需要使用 canvas 的
canvas.toDataURL('image/jpeg')
将画布转换为 BASE64 格式的图片 - BASE64 格式的图片链接对于后端来说就是一个字符串,所以可以直接接收
1 |
|
接收 BASE64 并重新转换为图片格式
- 接收前端传入的 BASE64 字符串后,需要通过
org.apache.commons.codec.binary.Base64
将其转换为byte[]
格式- 需要注意的是字符串中
data:image/jpeg;base64,
之后的内容才是有效内容,所以需要在转换时先截取掉这一部分
- 需要注意的是字符串中
- 转换后直接使用
org.apache.commons.io.FileUtils
保存图片到指定路径即可
1 |
|