HTML2Canvas 库有时仅在图像由 Link 上传时随机生成空白图像

Question

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

这是我的 html link/local 存储上传。

  <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，它主要是从这个堆栈线程中复制的：

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

} }

澄清一下，输入 link/uploading 图像可以双向工作，并且图像可以在屏幕上正确显示。我面临的问题是使用 html 2 canvas.

进行“截图”

这是我的 javascript 使用 html2canvas

截图的代码

//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 的图片时，“截屏”图片有时会生成空白图片。

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

与通过本地存储上传相比，通过 link 上传的图片有时会出现空白屏幕截图，这有什么原因吗？我在文档中查看了一些关于受污染 canvas 的内容，但我不确定这是否是问题所在，因为当 uploading/saving 图像时我在控制台中没有收到任何错误： 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 错误。我认为这就是 link 选项不起作用而本地存储起作用的原因 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

好的，我设法解决了我的问题。它本质上是该线程上解决方案的副本：.

我基本上做的是拍摄用户输入的图像 url 并将其渲染到单独的 canvas。

我用这个 https://cors-anywhere.herokuapp.com/ 启用了 cors。我从中得到了一个（已启用 cors？）数据 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)

});

HTML2Canvas 库有时仅在图像由 Link 上传时随机生成空白图像

HTML2Canvas Library Sometimes Produces Blank Images Randomly ONLY When Image Is Uploaded By Link

html

javascript

jquery

html2canvas