使用html2canvas将html转为图片，网上找的解决清晰度问题大多存在最后生成的图片错位或者偏移问题。
布局html，其中#img-dom为待转换的html内容，.banner-canvas为输出位置。
<div class="banner-title" id="img-dom">
...........
</div>
<div class="banner-canvas"></div>
下面是js代码
// 获取待转换内容 & 创建canvas
var _canvas = document.getElementById('img-dom');
var canvas = document.createElement("canvas");
// 获取原始内容的宽高，以及缩放比例
var width = _canvas.offsetWidth;
var height = _canvas.offsetHeight;
var scale = window.devicePixelRatio;
// 设置canvas的宽高（缩放后的）
canvas.width = width * scale;
canvas.height = height * scale;
// 获取canvas的2d绘图的环境
var context = canvas.getContext("2d");
// 获取内容的相对于视口的位置
var rect = _canvas.getBoundingClientRect();
// 设置缩放 & 设置偏移
context.scale(scale, scale);
context.translate(-rect.left, -rect.top);
// 将HTML生成图片
html2canvas(document.getElementById('img-dom'), {
allowTaint: true, // 允许跨域
useCORS: true, // 允许跨域
canvas: canvas,
}).then(function (canvas) {
var imgSrc = canvas.toDataURL('image/png', 1);
$('.banner-title').remove();
$('.banner-canvas').append(`<img src="${imgSrc}" >`);
$('.banner-canvas img').css({
"height": height + "px",
"width": width + "px",
});
});
参考文章：
1、基于html2canvas实现网页保存为图片及图片清晰度优化
2、html2canvas2image 生成图片位置偏移 不全 白边如何解决？
