problem description
When taking a screenshot ofhtml2canvas, the dom element is set to position absolute, and the content of this dom element cannot be captured
.the environmental background of the problems and what methods you have tried
google did not find the answer, but you can intercept the dom content by removing the position:absolute of dom.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
var copyDom = targetDom;
copyDom.css(
{
"background-image":"url("./bg03.jpg")"
}
);
/* $("body").append(copyDom);//copybody*/
var width = copyDom.offsetWidth;//dom
var height = copyDom.offsetHeight;//dom
var scale = 2;//
var canvas = document.createElement("canvas");
canvas.width = width*scale;//canvas
canvas.height = height*scale;//canvas
var content = canvas.getContext("2d");
content.scale(scale,scale);
var rect = copyDom.get(0).getBoundingClientRect();//
content.translate(-rect.left,-rect.top);//context
html2canvas(copyDom[0], {
/* allowTaint:true,
useCORS:true,
tainTest:true,*/
scale:scale,
canvas:canvas,
width:width,
heigth:height,
}).then(function (canvas) {
downloadImage(canvas.toDataURL(),"xxx.png")
});