我遇到這個問題已經(jīng)有一段時間了，我的網(wǎng)站的用戶上傳了一張圖片，然后這張圖片被放在一個已經(jīng)放在網(wǎng)站上的模板中。

當我試圖在桌面上使用html2canvas時，一切都正常，但當我試圖在我的iPhone上執(zhí)行它時，它不起作用，只是產生了一個image.jpg.txt文件。

然后，我在我的iPad上測試了它，只是想弄清楚問題是出在移動設備上還是僅僅出在iOS上，在我的iPad上執(zhí)行它成功了，并產生了一個圖像文件。

HTML:

<div id="header">
        <a href="index.html" id="generalLink">General</a>
        <a href="page2.html" id="rehearsalLink">Page2</a>
    </div>
    <input type="file" accept="image/*" onchange="imageUpload(event);" id="imageUpload">Upload Image</input>
    <div class="frameMain">
        <div id="frameContainer">
            <img src="images/generalFrame.png" alt="" class="frameImage">
            <div id="uploadedImage">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@latest/dist/html2canvas.min.js"></script>
    <script src="index.js"></script>

JavaScript:

function imageUpload(event){
    if(event.target.files.length > 0){
      var src = URL.createObjectURL(event.target.files[0]);
      var preview = document.getElementById("uploadedImage");
      preview.style.backgroundImage = "url(" + src + ")";
    }
    
    let myElement = document.getElementById("frameContainer");
    console.log(myElement)

    html2canvas(myElement).then(canvas => {
      const link = document.createElement('a');
      link.download = 'image.jpg';
      link.href = canvas.toDataURL('image/jpg');
      document.body.appendChild(link);
      link.click();
      }).catch(error => {
      console.error('Error:', error);
      });
}