Библиотека HTML2Canvas иногда создает пустые изображения случайным образом, ТОЛЬКО когда изображение загружается по ссылке - PullRequest
Новая
       28

Библиотека HTML2Canvas иногда создает пустые изображения случайным образом, ТОЛЬКО когда изображение загружается по ссылке

0 голосов
/ 03 августа 2020

Итак, я делаю генератор мемов, и у пользователя есть возможность ввести ссылку на изображение ИЛИ загрузить локальный файл из хранилища.

Вот мой 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.

Это мой 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);
   });
}

Это code по сути делает "снимок экрана" изображения, а затем показывает его под сайтом. Проблема в том, что когда я загружаю изображение с URL-адресом, при «скриншоте» изображения иногда получается пустое изображение.

Однако, если я go перешел на URL-адрес изображения, загрузите изображение в локальное хранилище, а затем используйте другой вариант для загрузки изображения из локального хранилища, изображение успешно сохраняется вместо отображения пустого изображения.

Есть ли причина, по которой пустой снимок экрана изображения иногда появляется при загрузке по ссылке, сравниваемой к загрузке из локального хранилища? Я немного просмотрел документы о испорченном холсте, но я не уверен, что это проблема, потому что я не получаю ошибок в консоли при загрузке / сохранении изображения: 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 .

Я получаю сообщение об ошибке, когда изображение загружается пустым, когда я включаю опцию useCors. Я думаю, поэтому опция ссылки не работает, а локальное хранилище работает введите описание изображения здесь

Код, который отображает изображение 

<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>

1 Ответ

0 голосов
/ 05 августа 2020

Хорошо, мне удалось решить мою проблему. По сути, это копия решения в этой теме: html работает, но JS Причина загрузки изображения Ошибка CORS .

По сути, я взял URL-адрес изображения, введенный пользователем, и отрендерил его на отдельном холсте.

И я включил cors с этим https://cors-anywhere.herokuapp.com/. Я получил (cors enabled?) URL-адрес данных из этого, а затем все, что мне нужно было сделать, это добавить изображение с изображением sr c в качестве 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)

});
...