首先要生成的部分盡量不要用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

總結

以上是生活随笔為你收集整理的关于html2canvas生成海报模糊的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。