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图像上传和显示

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的图像时；屏幕截图"；图像有时会产生空白图像。

但是，如果我转到图像url，在本地存储中下载图像，然后使用另一个选项从本地存储上传图像，则图像将成功保存，而不是显示空白图像。

与通过本地存储上传相比，通过链接上传时有时会出现图像的空白截图，这有什么原因吗？我在文档中查看了一些关于受污染画布的内容，但我不确定这是否是问题所在，因为上传/保存图像时，控制台中没有出现错误：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#:~：text=Security%20和%20绘制了%20画布，-因为%20使用了%20像素&text=作为%20很快%20作为%20您%20绘制，一个%20异常%20到%20被%20拖动。

当我启用使用cors选项时，图像上传为空白时，我收到了一个cors错误。我认为这就是链接选项不起作用而本地存储起作用的原因在此处输入图像描述

显示图像的代码

<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=>工作，但JS图像加载导致CORS错误。

我所做的基本上是将用户输入的图像url呈现到一个单独的画布上。

我用这个启用了corshttps://cors-anywhere.herokuapp.com/.我从中得到了一个(启用了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)
});