首先要生成的部分尽量不要用css写背景图,用img做背景图
其次是相关配置(虽然感觉作用不大)
function createPoster(options) {
let canvasWidth = options.width;
let canvasHeight = options.height;
options.html2canvas($(options.canvasCont)[0], {
useCORS: true,
scale: 2,
dpi: 300,
windowWidth: options.width,
windowHeight: options.height,
scrollY: 0,
scrollX: 0,
})
.then(function (canvas) {
var imgUri = canvas.toDataURL("image/jpeg"); //生成base64的编码图片
const posterImg = new Image();
posterImg.src = imgUri;
posterImg.className = "poster_canvas";
let timer = setTimeout(() => {
clearTimeout(timer);
$(options.canvasBox).prepend(posterImg);
$(".poster_canvas").css({
width: canvasWidth,
height: canvasHeight,
});
$(options.canvasBox).show();
}, 2000);
});
}
用img做背景图为保持img不变形且撑满元素 会用到object-fit:cover;但是!!! html2canvas不识别这个CSS属性...所以需要修改下插件
打开html2canvas.js 不是html2canvas.min.js(我是用npm安装的) 然后搜索
CanvasRenderer.prototype.renderReplacedElement
然后把里面的内容做下修改,如下
CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
// 原来的代码 注释掉
// if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
// var box = contentBox(container);
// var path = calculatePaddingBoxPath(curves);
// this.path(path);
// this.ctx.save();
// this.ctx.clip();
// this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
// this.ctx.restore();
// }
// 改成下面的代码
if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
var box = contentBox(container);
var path = calculatePaddingBoxPath(curves);
this.path(path);
this.ctx.save();
this.ctx.clip();
let newWidth;
let newHeight;
let newX = box.left;
let newY = box.top;
if(container.intrinsicWidth / box.width < container.intrinsicHeight / box.height) {
newWidth = box.width;
newHeight = container.intrinsicHeight * (box.width / container.intrinsicWidth);
newY = box.top + (box.height - newHeight) / 2;
} else {
newWidth = container.intrinsicWidth * (box.height / container.intrinsicHeight);
newHeight = box.height;
newX = box.left + (box.width - newWidth) / 2;
}
this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, newX, newY, newWidth, newHeight);
this.ctx.restore();
}
};
这样就可以处理图片变形的问题
我的html2canvas版本是1.4.1