javascript – html2canvas works on desktop and iPadOS however not on iOS


I have been having this drawback for some time now, the consumer of my web site uploads a picture after which the picture is positioned inside a template that has already been positioned on the web site.

When I attempt to use html2canvas on desktop, every little thing works, however after I tried to execute it on my iPhone, it did not work and simply resulted in a picture.jpg.txt file.

Then, I examined it on my iPad simply to determine if the issue is with cell gadgets or simply iOS, and executing it on my iPad labored and resulted in a picture file.


    <div id="header">
        <a href="index.html" id="generalLink">Common</a>
        <a href="page2.html" id="rehearsalLink">Page2</a>
    <enter sort="file" settle for="picture/*" onchange="imageUpload(occasion);" id="imageUpload">Add Picture</enter>
    <div class="frameMain">
        <div id="frameContainer">
            <img src="pictures/generalFrame.png" alt="" class="frameImage">
            <div id="uploadedImage">
    <script src="https://cdn.jsdelivr.internet/npm/html2canvas@newest/dist/html2canvas.min.js"></script>
    <script src="index.js"></script>


operate imageUpload(occasion){
    if(occasion.goal.information.size > 0){
      var src = URL.createObjectURL(occasion.goal.information[0]);
      var preview = doc.getElementById("uploadedImage");
      preview.model.backgroundImage = "url(" + src + ")";
    let myElement = doc.getElementById("frameContainer");

    html2canvas(myElement).then(canvas => {
      const hyperlink = doc.createElement('a');
      hyperlink.obtain = 'picture.jpg';
      hyperlink.href = canvas.toDataURL('picture/jpg');
      doc.physique.appendChild(hyperlink); on();
      }).catch(error => {
      console.error('Error:', error);