我遇到这个问题已经有一段时间了，我的网站的用户上传了一张图片，然后这张图片被放在一个已经放在网站上的模板中。

当我试图在桌面上使用html2canvas时，一切都正常，但当我试图在我的iPhone上执行它时，它不起作用，只是产生了一个image.jpg.txt文件。

然后，我在我的iPad上测试了它，只是想弄清楚问题是出在移动设备上还是仅仅出在iOS上，在我的iPad上执行它成功了，并产生了一个图像文件。

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);
      });
}