html2canvas generiert Bilder

Arbeitsprinzip

Das Funktionsprinzip der html2canvas-Bibliothek ist kein echter „Screenshot“, sondern das Lesen der Informationen des Ziel-DOM-Knotens auf der Webseite zum Zeichnen der Leinwand, sodass nicht alle CSS-Attribute (Referenzadresse) unterstützt werden .

Einführung von html2canvas

<script src="./html2canvas.min.js"></script>
Download-Link

Grundgrammatik

<div id="cvs-box">
<img style="width: 100px;" id="test-img" crossorigin="anonymous" src="https://img.alicdn.com/imgextra/i4/1043899953/O1CN01aqVriA2NOWgJofVfU_!!0-item_pic.jpg" alt="">
</div>
<img src="" id="test" style="width: 1200px;height: 500px;" alt="">

js
//参数
//allowTaint: true是否允许跨域
//useCORS:true是否尝试加载跨源图像作为CORS服务，在返回到代理（用来解决图片跨域加载问题）
//width，height，宽高
function createdcvs(params) {
    html2canvas(document.querySelector("#cvs-box"),
    {width:1200,height:500,allowTaint: true,useCORS:true}).then(canvas => {
      document.querySelector("#box1").appendChild(canvas)
      document.getElementById("test").src= canvas.toDataURL();
    });
  }

Probleme, die auftreten

1. Das Hintergrundbild ist verschwommen.
Lösung: Verwenden Sie das img-Tag, um den Hintergrundbildeffekt zu erzielen.

2. Das Bild kann nicht gerendert werden.
Fügen Sie crossorigin='anonymous' im img-Tag hinzu (crossorigin='anonymous' kann eine HTTP-Anfrage mit dem domänenübergreifenden Anforderungsheader Origin auslösen) und legen Sie die Konfiguration „allowTaint: true“ auf html2canvas fest.

3. Domänenübergreifend geladene Bilder verunreinigen die Leinwand und führen dazu, dass die Leinwand keine Daten exportieren kann.

Lösung 1:
Legen Sie useCORS:true für html2canvas fest, um domänenübergreifende Bilder zu laden, und stellen Sie sicher, dass das Attribut „crossOrigin="anonymous" hinzugefügt wird zu jedem Bild.
Lösung 2. Lesen Sie die Datei in ein Blob-Dateiobjekt ein und konvertieren Sie sie dann mit der Methode URL.createObjectURL() in eine verwendbare Adresse von img src und übertragen Sie sie dann auf die Leinwand. Hinweis: Beim Lesen eines
Blobs Stellen Sie sicher, dass der src im festzulegenden img-Tag leer ist. Rufen Sie nach dem Lesen der Datei die Funktion zum Generieren von Bildern auf

//将文件读入到blob文件在转img的方法
function getImage (url,imgId) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
        if (this.status == 200) {
            document.getElementById(imgId).src =  URL.createObjectURL(this.response);
        }
    };
    xhr.send();
    
}
let urltest = 'https://img.alicdn.com/imgextra/i4/1043899953/O1CN01aqVriA2NOWgJofVfU_!!0-item_pic.jpg'
getImage(urltest,'test-img')

//html2canvas生成图片的方法
function createdcvs(params) {
    html2canvas(document.querySelector("#cvs-box"),{width:1200,height:500,allowTaint: true,useCORS:true}).then(canvas => {
      document.querySelector("#box1").appendChild(canvas)
      //将canvas生成的地址放到图片内
      document.getElementById("test").src= canvas.toDataURL();
    });
  }

// setTimeout(()=>{
//   createdcvs()
// },3000)