实现HTML页面保存为图片

一、实现HTML页面保存为图片

1.1 已知可行方案

现有已知能够实现网页保存为图片的方案包括：

方案1：将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的

data URI

方案2：使用

html2canvas.js

实现（可选搭配

Canvas2Image.js

实现网页保存为图片）

方案3：使用

rasterizeHTML.js

实现

1.2 解决方案的选择

方案1：需要手动计算每个DOM元素的

Computed Style

，然后需要计算好元素在canvas的大小位置等属性。

方案1难点

：

相当于完全重写了整个页面的布局样式，增加了工作量。

由于canvas中没有的对象概念，对于元素丰富、布局复杂的页面，不易重构。

所有DOM元素改写进canvas会带来一些困难，例如：难以支持响应式，图片元素清晰度不佳和文字点击区域识别问题等。

方案2：该类功能中Github上stars最多(至今仍在维护)，Stack Overflow亦有丰富的讨论。只需简单调用html2canvas方法并设定配置项即可。

方案3：该方案的限制较多，目前仅支持3类可转为canvas的目标格式: 页面url，html字符串和document对象。

小结

: html2canvas是目前实现网页保存为图片功能的综合最佳选择。

1.3 html2canvas的使用方法

官方GitHub：https://github.com/niklasvh/h...

以下描述针对html2canvas版本是

0.5.0-beta4

1.3.1 实现保存为图片的第一步：html转为canvas

基于

html2canvas.js

可将一个元素渲染为canvas，只需要简单的调用

html2canvas(element[, options]);

即可。下列

html2canvas

方法会返回一个包含有

<canvas>

元素的

promise

：

html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});

1.3.2 实现保存为图片的第二步：canvas转image

上一步生成的canvas即为包含目标元素的

<canvas>

元素对象。实现保存图片的目标只需要将canvas转image即可。

这里的转换方案有

2种

：

方案1：基于原生canvas的

toDataURL

方法将canvas输出为

data: URI

类型的图片地址，再将该图片地址赋值给

<image>

元素的src属性即可

方案2：使用第三方库

Canvas2Image.js

，调用其

convertToImage

方法即可（GitHub）

实际上，

Canvas2Image.js

也是基于

canvas.toDataURL

的封装，相比原生的canvas API对于转为图片的功能上考虑更为具体(未压缩的包大小为7.4KB)，适合项目使用。

二、生成图片的清晰度优化方案

2.1 基础的清晰度优化方案

最终图片的清晰度

取决于

第一步中html转换成的canvas的清晰度。

现有解决方案参考；

html5 canvas在高倍屏下变模糊的处理办法

html5 canvas绘制图片模糊的问题

其基本原理为：
将

canvas

的属性

width

和

height

属性放大为2倍（或者设置为

devicePixelRatio

倍），最后将canvas的CSS样式width和height设置为原先1倍的大小。

例如：希望在html中实际显示的

<canvas>

宽高分别为

160px

,

90px

则可作如下设置

<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>

参考上述文档具体的使用案例如下；

convert2canvas() {

var shareContent = YourTargetElem;
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = document.createElement("canvas");
var scale = 2;

canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);

var opts = {
scale: scale,
canvas: canvas,
logging: true,
width: width,
height: height
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');

var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

document.body.appendChild(img);
$(img).css({
"width": canvas.width / 2 + "px",
"height": canvas.height / 2 + "px",
})
});
}

2.2 进阶的清晰度优化方案

上述设置可以解决通常情况下图片不清晰的问题，不过探索并没有结束。

实际在我们的项目中，即使作出

2.1节

的设置后，大果粒一般的渲染结果依然尴尬。

下面直接给出3条进一步的优化策略：

更改

百分比布局

为

px布局

（如果原先是百分比布局的话）

关闭

canvas默认的

抗锯齿设

置

设置模糊元素的

width

和

height

为素材原有宽高，然后通过

transform: scale

进行缩放。这里

scale

的数值由具体需求决定。

基本原理

如果原来使用百分比设置元素宽高，请更改为

px为单位

的宽高，避免样式二次计算导致的模糊

默认情况下，canvas的抗锯齿是开启的，需要

关闭抗锯齿

来实现图像的锐化(MDN: imageSmoothingEnabled )

除了canvas可以通过扩大2倍宽高然后缩放至原有宽高来提高清晰度，对于DOM中其他的元素也可以使用

css样式

的

scale

来实现同样的缩放

例: html2canvas配置

convert2canvas() {

var cntElem = $('#j-sec-end')[0];

var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};

html2canvas(shareContent, opts).then(function (canvas) {

var context = canvas.getContext('2d');
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

// 【重要】默认转化的格式为png,也可设置为其他格式
var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);

document.body.appendChild(img);

$(img).css({
"width": canvas.width / 2 + "px",
"height": canvas.height / 2 + "px",
}).addClass('f-full');

});
}

例: DOM元素样式：


.targetElem {width: 54px;height: 142px;margin-top:2px;margin-left:17px;transform: scale(0.5)}

三、含有跨域图片的配置

由于canvas对于图片资源的

同源限制

，如果画布中包含跨域的图片资源则会污染画布，造成生成图片样式混乱或者html2canvas方法不执行等问题。

以下主要解决两类跨域的图片资源：包括已配置过CORS的

CDN

中的图片资源和

微信用户头像

图片资源。

3.1 针对CDN中的图片的配置

要求CDN的图片配置好

CORS

。

CDN

配置好后，通过chrome开发者工具可以看到响应头中应含有

Access-Control-Allow-Origin

的字段。

开启

html2canvas

的

useCORS

配置项。即作如下设置：


var opts = {useCORS: true};

html2canvas(element, opts);

注意

：
如果没有开启

html2canvas

的

useCORS

配置项，

html2canvas

会正常执行且不会报错，但是不会输出对应的CDN图片
（已测试同时包含

CDN的图片

和

本地图片

的资源的页面，但是只有

本地图片

能够被正常渲染出来）

3.2 针对微信用户头像的配置

如果需要将

微信

平台中的用户头像一并保存为图片，

3.1

的方案无能为力。可通过配置服务端

代理转发

(forward)实现，此处不赘述。

其他注意事项

1. margin的遮挡问题

微信中，唤出

长按保存图片

的菜单要求长按的对象直接是

<image>

元素，如果

<image>

元素上方存在遮挡，则不会唤出菜单。
而事实上，引发遮挡的并不只是非

<image>

元素，还可能是

margin

属性。例如：若在页面底部，对一个绝对定位的元素设置了数值很大的

margin-top

，则

margin-top

所涉及的区域，均无法长按唤出菜单。解决方案：将

margin-top

改用为

top

即可。

2. 安卓版微信保存图片失败的问题

canvas2img

默认保存图片的格式为

png

，而在安卓版微信中所生成的图片尽管能长按唤出保存图片的菜单，但是无法正确保存到本地相册。

解决方案

：设置

canvas2img

的生成图片格式配置项为

jpeg

即可。

3. JPEG的黑屏问题

设置

canvas2img

输出格式为

jpeg

，会有一定几率导致生成的图片包含大量的黑色块。

可能的解决方案

：缩减部分图片元素的体积和尺寸大小。

4. 不能保留动效

在图片的

转化前

，必须

停止

或者删除动效后才能正确渲染出图片，否则生成的图片是破裂的。