HTML2Canvas 库有时仅在通过链接上传图像时随机生成空白图像

Question

所以我正在制作一个模因生成器，用户可以选择输入图片链接或从存储中上传本地文件。

这是我用于链接/本地存储上传的 html。

  <div class="Main_Grid_Item Link_Upload_Div">
    <form action="/" method="POST">
      <p>Enter Image Link:</p>
      <input class="Image_Input" type="text" name="Link_Url" placeholder="Image Link"><br>
      <button class="Image_Submit" type="submit" name="button">Submit Image</button>
    </form>
  </div>

  <div class="Main_Grid_Item File_Upload_Div">
    <form>
      <p>Upload Image:</p>
      <input id = "UploadOutput" class = "Upload_Output" type="text" placeholder="Image Name After Upload" readonly><br>
      <label for="ImgStorage" class="Image_Upload_Label">Upload Image</label>
      <input type='file' id="ImgStorage" />
    </form>
    <br>
  </div>

对于专门的文件上传，这是我的 javascript，主要是从这个堆栈线程复制的：Javascript image upload and display

function readURL(input) {
//if picture exists then create a new FileReader
if (input.files && input.files[0]) {
var reader = new FileReader();

//the image with specified id gets url
reader.onload = function (e) {
  $("#blah").attr("src", e.target.result);
};

//reads picture
reader.readAsDataURL(input.files[0]);

} }

只是为了澄清输入链接/上传图像确实可以双向工作，并且图像可以正确显示在屏幕上。我面临的问题是使用 html 2 画布进行“截图”时。

这是我用 html2canvas 截屏的 javascript 代码

//takes screenshot of Meme with overlay
$("#Save_Meme_Button").on("click", memeScreenShot);

function memeScreenShot() {
   html2canvas(document.querySelector(".Main_Image_Div")).then((canvas) => {
    document.body.appendChild(canvas);
   });
}

此代码实质上是对图像进行“屏幕截图”，然后将其显示在网站下方。问题是当我上传带有 url 的图片时，“截图”图片有时会产生空白图片。

但是，如果我转到 image-url，将图像下载到本地存储，然后使用其他选项从本地存储上传图像，则图像会成功保存，而不是显示空白图像。

与通过本地存储上传相比，通过链接上传时有时会出现图像的空白屏幕截图有什么原因吗？我在文档上查看了一些关于受污染的画布的信息，但我不确定这是否是问题所在，因为上传/保存图像时控制台中没有错误： https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#:~:text=Security%20and%20tainted%20canvases,-Because%20the%20pixels&text=As%20soon%20as%20you%20draw,an%20exception%20to%20be%20thrown.

当我启用 useCors 选项时，当图像上传为空白时，我收到一个 cors 错误。我认为这就是为什么链接选项不起作用而本地存储起作用的原因 enter image description here

显示图像的代码

<div id = "MainImageDiv" class="Main_Image_Div">
  <% if(typeof imgUrl !== 'undefined'){ %>
  <img id="blah" src=<%= imgUrl %> class="Main_Image" /></img>
  <% } else{ %>
  <img id="blah" src="/images/stonks.png" class="Main_Image" /></img>
  <% } %>
  <p id="TopTextPar" class="Top_Text"></p>
  <p id="BottomTextPar" class="Bottom_Text"></p>
</div>

Answer 1

好的，所以我设法解决了我的问题。它本质上是该线程上解决方案的副本：html <img src=...> works but JS Image loading cause CORS error。

我所做的基本上是获取用户输入的图像 url 并将其渲染到单独的画布上。

我用这个https://cors-anywhere.herokuapp.com/ 启用了cors。我得到了一个（cors enabled？）数据url，然后我所要做的就是附加一个带有图像src的图像作为我收到的数据url。

这是我解决的代码：

// Changes image based on link
$("#ImageSubmit").click(function(){
//makes the previous meme dissapear and gets the url of the inputted link
$("#blah").css("display","none");
const imgUrl = $("#ImageInput").val();

function loadImgAsBase64(url, callback) {
//creates camvas amd image element + allows cors + loads image
   let canvas = document.createElement('CANVAS');
   let img = document.createElement('img');
   img.setAttribute('crossorigin', 'anonymous');
   img.src = 'https://cors-anywhere.herokuapp.com/' + url;

img.onload = () => {
    canvas.height = img.height;
    canvas.width = img.width;
    let context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    let dataURL = canvas.toDataURL('image/png');
    canvas = null;
    callback(dataURL);
  };
}

loadImgAsBase64(imgUrl, (dataURL) => {
    $("#MainImageDiv").append(`<img id="blah" class = "Main_Image Link_Meme" 
    src="${dataURL}">`);
});

loadImgAsBase64(imgUrl)

});