[英]HTML2Canvas Library Sometimes Produces Blank Images Randomly ONLY When Image Is Uploaded By Link
So I'm Making a meme generator and the user has the option to enter an image link OR upload a local file from storage.所以我正在制作一个模因生成器,用户可以选择输入图像链接或从存储中上传本地文件。
Here is my html for link/local storage upload.这是我的 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>
And for specifically file uploading this is my javascript which was mostly copied from this stack thread: Javascript image upload and display对于具体的文件上传,这是我的 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]);
} } } }
Just to clarify that entering a link/uploading an images DOES WORK both ways and the image is shown properly on screen.只是为了澄清输入链接/上传图像确实可以双向工作,并且图像在屏幕上正确显示。 The problem that I'm facing is when taking a "screenshot" with html 2 canvas.我面临的问题是使用 html 2 canvas 进行“截图”时。
This is my javascript code for taking a screenshot with html2canvas这是我的 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);
});
}
This code essentially takes a "screenshot" of the image and then shows it below the website.此代码实质上是对图像进行“截图”,然后将其显示在网站下方。 The problem is that when I upload an image with a url, "screenshotting" the image will sometimes produce a blank image.问题是,当我使用 url 上传图像时,“截屏”图像有时会产生空白图像。
However if I go to the image-url, download the image on local storage, and then use the other option to upload an image from local storage, the image is saved sucessfully instead of showing a blank image.但是,如果我将 go 到 image-url,将图像下载到本地存储,然后使用其他选项从本地存储上传图像,则图像会成功保存,而不是显示空白图像。
Is there any reason why a blank screenshot of the image sometimes happens when uploaded by link compared to being uploaded by local storage?与通过本地存储上传相比,通过链接上传时有时会出现图像的空白屏幕截图是否有任何原因? I looked a bit on the docs about something about a tainted canvas but I'm not sure if thats the problem because I get no errors in the console when uploading/saving an image: 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 .我在文档上看了一些关于受污染的 canvas 的信息,但我不确定这是否是问题所在,因为上传/保存图像时控制台中没有错误: https://developer.mozilla.org/en- US/docs/Web/HTML/CORS_enabled_image#:~:text=Security%20and%20tainted%20canvases,-因为%20the%20pixels&text=As%20soon%20as%20you%20draw,an%20exception%20to%20be%20thrown 。
I am getting a cors error when the image is uploaded blank when I enable the option to useCors.当我启用 useCors 选项时,当图像上传空白时,我收到 cors 错误。 I think this is why the link option is not working and the local storage is working enter image description here我认为这就是为什么链接选项不起作用而本地存储正在工作的原因在此处输入图像描述
Code that displays image显示图像的代码
<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>
Ok so I managed to solve my problem.好的,所以我设法解决了我的问题。 It's essentially a copy of the solution on this thread: html <img src=...> works but JS Image loading cause CORS error .它本质上是该线程上解决方案的副本: html <img src=...> 有效,但 JS Image loading cause CORS error 。
What I essentially did was take the image url the user entered and rendered it onto a seperate canvas.我基本上所做的是拍摄用户输入的图像 url 并将其渲染到单独的 canvas 上。
And I enabled cors with this https://cors-anywhere.herokuapp.com/ .我用这个https://cors-anywhere.herokuapp.com/ 启用了 cors 。 I got a (cors enabled?) data url out of this and then all I had to do is append an image with the image src as the data url I received.我得到了一个(cors 启用?)数据 url ,然后我所要做的就是 append 图像 src 作为我收到的数据 Z572D4E421E5E6B9BC11D815E8A0271 的图像。
Here's my solved code:这是我解决的代码:
// 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)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.