关于html2canvas生成海报模糊

首先要生成的部分尽量不要用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生成海报模糊相关推荐

h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
前端生成海报图：html2canvas 生成海报图/网页html转图片
html2canvas 生成海报图 <html><head> <title>生成海报图Demo</title> </head><bod ...
html2canvas生成海报的各种问题
html2canvas (一)官网下载安装 (二)基础用法 (三)生成海报问题 canvas高分屏下的模糊问题 html2canvas图片模糊问题 canvas图片getImageData,toDat ...
uniapp中，H5端使用html2canvas生成海报
项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以.最后解决方案是,把网络图片全部转成base64展示 ...
js常用插件(三)之html2canvas生成海报
js常用插件之html2canvas截图生成海报欢迎点击: 个人官网博客先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/aja ...
php html生成海报jpg,html2canvas 生成海报
应用场景移动端H5 分享海报安装html2canvas 插件 npm install --save html2canvas Vue中使用 // 在Vue页面中引入 import html2canv ...
html2canvas手机黑屏,html2canvas 生成海报图开发中遇到的问题
ios里,生成的图片不显示 canvas.toDataURL('image/jpeg', 1.0) 使用image/jpeg格式,在指定图片格式为 image/jpeg 或 image/webp的情况 ...
用vue PHP实现海报设计功能,有关vue html2canvas生成海报功能的实现
这是我第一篇简书文章,作为一名前端,而且现在电商比较流行的情况下很多电商公众号商城都用到了生成海报图片长按保存到相册然后可以转发给好友或者分享到朋友圈在Web前端中,生成图片非Canvas莫属 ...
uni-app 使用html2canvas生成海报，一步到位
ps: 如果图片存在跨域问题,请现在后台配置解决图片跨域问题; app不能操作dom,所以app使用renderJS处理示例在最后步骤分为三步 1.安装html2canvas npm i html ...

关于html2canvas生成海报模糊

关于html2canvas生成海报模糊相关推荐

最新文章

热门文章