html2canvas生成图片空白或缺失问题解决

最近接到反馈，先前做的一个小工具会出现一些bug 主要原理是根据用户填写的内容生成一个隐藏起来的节点，并把这个节点截取生成图片下载下来；

首先把这个节点显示出来发现节点是正常的

那么问题就出现在获取节点上，这里使用到了html2canvas将节点转化为 base64 格式的图片，打印一下这个文件：
ok, 是空白的；

当页面缩小及生成图片滚动页面时，会出现类似问题，后来发现是页面有滚动条时会出现截图失败；
查阅文档还可以通过获取截图范围的精确位置截图；

我们需要的是截图区域左上角的 x, y 坐标，以及截图区域的宽高；

const dom = $(".creatSign-layout”);
x 坐标：dom.offset().left
y 坐标：dom.offset().top

在获取节点的 x, y 坐标时，发现用 dom.offsetLeft, dom.offsetTop 位置不准确，原因是：

offsetLeft / offsetTop
在页面任一元素的offsetLeft总是找到离其最近的已经定位的父元素或祖先元素定位，如果没有，就根据根节点body定位，然后获取其left值。

offset().left / offset().top
返回或设置匹配元素相对于文档的偏移（位置）。无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。

以下是使用 html2canvas 生成 canvas，并下载为图片的完整代码：

toImage() {
setTimeout(function () {
const dom = $(".creatSign-layout”);   // 要截取为图片的 dom 节点
const containerDom = $(".router-view-content");
console.log( dom.offset(),'num')
html2canvas(document.querySelector(".creatSign-layout"), {
scale: 2,
dpi: 300,
x: dom.offset().left,
y: dom.offset().top,
width: 556,
height: 168,
removeContainer:true
}).then(function (canvas) {
let dataURL = canvas.toDataURL("image/jpg");
console.log(dataURL);
function base64ToBlob(img) {
let parts = img.split(";base64,");
let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
const blob = base64ToBlob(dataURL);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
let aLink = document.createElement("a");
aLink.download = "邮件签名";
aLink.href = URL.createObjectURL(blob);
aLink.click();
});
});
},

html2canvas生成图片空白或缺失问题解决相关推荐

html转换成canvas一片空白,html2canvas截图空白问题怎么解决 html2canvas截图空白问题解决方法...
本篇文章小编给大家分享一下html2canvas截图空白问题解决方法,通过代码图文详细分析了问题及解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 项目使用的reac ...
html2canvas 生成图片以及出现白边问题解决办法生成海报
html2canvas 生成图片以及出现白边问题解决办法: 我在写demo的时候,pc端调试正常,但是到了移动端图片底部就会出现一条白边,我的解决办法就是:backgroundColor: &qu ...
前端使用html2canvas生成图片踩坑
前端使用html2canvas生成图片经验总结前言主要是总结一下html2canvas生成图片的基础用法,以及自己在使用html2canvas过程中踩过的坑和相应的解决思路背景近段时间接手一个 ...
QRCode 转二维码，html2canvas生成图片海报
项目场景: 使用QRCode,html2canvas技术 QRCode 转二维码,html2canvas生成图片海报并分享到微信和朋友圈和保存图片 1.安装QRCode (1)安装 npm i qrc ...
android截图canvas为空,html2canvas截图空白问题的解决
最近在项目中遇到一个需求,需要提供网页截图的功能.百度下发现html2canvas很好用.那就试试吧. 资源下载地址使用方式项目使用的react组件开发方式.参照官方的说明文档getting-st ...
计算机启动后没有桌面图标,电脑桌面图标没了怎么办启动电脑桌面空白没有图标问题解决方法...
我的电脑图标不见了怎么办呢?今天有用户反映,向往常一样从桌面左上角打开我的电脑时却发现图标不见了.我的电脑图标从哪里找回呢?今天,我就将我的电脑图标不见了的解决方法分享给你们,希望对大家有所帮助. 启 ...
前端使用html2canvas生成图片
项目场景是完成测评试题,生成学生测评报告,部署在移动端H5页面, 本文记录vue中使用html2canvas生成图片. html2canvas官方网站 1基础使用 1.1 安装html2canvas ...
解决html2canvas截图空白的问题
问题:当出现滚动条时截图会有空白解决办法:获取需要截图的图片的绝对定位,截图时设置精确的x,y html2canvas(that.$refs.imageDom, {// that.$refs.ima ...
修改html2canvas生成图片的dpi
今天做的项目需要把生成的图片打印出来,设计说生成的图片dpi不够,用html2canvas的scale参数怎么改dpi都是72,修改scale图片的像素会变大,图片是清晰了,但是不知道满不满足打印需求 ...

html2canvas生成图片空白或缺失问题解决

html2canvas生成图片空白或缺失问题解决相关推荐

最新文章

热门文章