Include iframe, SVG, video processing 1. Original image
downloadImg=async() = > {let svgElem = document.querySelectorAll("#canvasP svg");
let videoElem=document.querySelectorAll("#canvasP video");
let iframeElem=document.querySelectorAll("#canvasP iframe");
// The following is the processing of SVG
svgElem.forEach((node,index) = >{
let parentNode = node.parentNode;
if(new XMLSerializer().serializeToString(node)){
node.setAttribute('xmlns'.'http://www.w3.org/2000/svg')
let img = new Image();
let svghtml = new XMLSerializer().serializeToString(node);
let imgsrc =`data:image/svg+xml; utf,${svghtml}`
img.src=imgsrc;
img.onload=function(){
img.setAttribute('data-cover'.'svg'); parentNode.removeChild(node); parentNode.appendChild(img); }}})/ / convert the iframe
this.changeIframe(iframeElem);
setTimeout(async() = > {// Convert the video
await this.changeVideo(videoElem);
this.htmlToPng()
},1500)
// Restore the video
function recoverCanvasToVideo(targetElem: { querySelectorAll: (arg0: string) => any; }, elems: any[] | NodeListOf<Element>) {
let canvasElems = targetElem.querySelectorAll("canvas[data-cover='video']");
if(! targetElem){throw new Error('must have targetElem param')}for(let i = 0; i < canvasElems.length; i++){
letnode = canvasElems[i], parentNode = node.parentNode; parentNode.removeChild(node); parentNode.appendChild(elems[i]); }}/ / SVG
function recoverCanvasToSvg(targetElem: { querySelectorAll: (arg0: string) => any; }, elems: any[] | NodeListOf<Element>) {
let canvasElems = targetElem.querySelectorAll("canvas[data-cover='svg']");
if(! targetElem){throw new Error('must have targetElem param')}for(let i = 0; i < canvasElems.length; i++){
letnode = canvasElems[i], parentNode = node.parentNode; parentNode.removeChild(node); parentNode.appendChild(elems[i]); }}/ / restore the iframe
function recoverCanvasToIframe(targetElem: { querySelectorAll: (arg0: string) => any; }, elems: any[] | NodeListOf<Element>) {
let canvasElems = targetElem.querySelectorAll("img[data-cover='iframe']");
if(! targetElem){throw new Error('must have targetElem param')}console.log(canvasElems)
for(let i = 0; i < canvasElems.length; i++){
letnode = canvasElems[i], parentNode = node.parentNode; parentNode.removeChild(node); parentNode.appendChild(elems[i]); }}// @ts-ignore
setTimeout(async() = > {// @ts-ignore
await recoverCanvasToIframe(document.querySelector('#canvasP'),iframeElem)
// @ts-ignore
await recoverCanvasToVideo(document.querySelector('#canvasP'),videoElem)
// @ts-ignore
await recoverCanvasToSvg(document.querySelector('#canvasP'),svgElem)
},2000)
}
htmlToPng=() = >{
htmlToImage.toPng(document.querySelector('#canvasP'))
.then(function (dataUrl) {
let a = document.createElement('a');
a.setAttribute('href', dataUrl);//toDataUrl: Converts canvas canvas information to base64 images
a.setAttribute('download'.'downImg');// This is required, otherwise an error will be reported
a.setAttribute('target'.'_self');
a.click()
})
.catch(function (error) {
console.error('oops, something went wrong! ', error);
})
}
changeVideo= (videoElem: NodeListOf<Element>) = >{
videoElem.forEach((node: CanvasImageSource, index: any) = >{
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
const img=new Image();
img.src='require(/images/test.png)';
ctx.drawImage(node, 0.0.'100%'.'100%');
canvas.setAttribute('data-cover'.'video');
node.parentNode.appendChild(canvas)
node.parentNode.removeChild(node)
})
}
changeIframe=(elem: CanvasImageSource[]) = >{
elem.forEach(async (node: CanvasImageSource, index: any)=>{
let parentNode = node.parentNode;
const img=new Image();
await html2canvas(node.contentWindow.document.querySelector('#root'), {foreignObjectRendering:true.allowTaint:true.useCORS:true}).then(canvas= > {
const src = canvas.toDataURL('image/png');
img.src=src;
img.setAttribute('data-cover'.'iframe'); parentNode.appendChild(img) parentNode.removeChild(node); })})}Copy the code