Сохранение изображений из Canvas с использованием Fabricjs - PullRequest
Новая
       40

Сохранение изображений из Canvas с использованием Fabricjs

0 голосов
/ 11 октября 2019

Проблема: когда я добавляю изображения на холст на основе value="url", он будет работать при сохранении. НО, когда я добавляю изображения на холст на основе data-img-src="url", оно не будет сохранять изображение, и ссылка сохранения будет отключена (я могу обмануть эту ссылку сохранения, чтобы она оставалась активной, если я добавляю обе версии изображения, но изображение, котороедобавляется через data-img... не сохраняет, а другой будет)

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

Оба способа позволяют добавлять изображение на холст.

Код пересоздан: https://jsfiddle.net/h7dp3gxe/3/

Быстрые примечания:

  1. IDK, что происходит, но ссылка сохранения может не работать в зависимости от браузера. Он работал полностью прошлой ночью, но теперь, чтобы он заработал, мне нужно еще раз быстро щелкнуть ссылку Сохранить, чтобы он заработал.

  2. Только сохранение из загруженных вручную файлов сохранит в Chromeэто выглядит как

В javascript примечания объяснят обе версии, которые позволяют добавлять на холст 

//selecting images based on value
//choose/select bottom 4 options to add images
**code here**

**and** 

//selecting images based on data-image-src NOT WORKING/SAVE
//choose/select top 4 select options to add images
**code here**

Комментарий либо для проверки, и для просмотра функциональности.

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

Причина, по которой у меня есть:

images = {}

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

Ruby / Rails: <% images_2 = ImageFile.map { |i| [i.id, i.image_file_url] } %>

Мой image-picker.js в моей форме выглядит следующим образом: 

<%= ff.select :image_file_id, options_for_select(@image_files.map { |image| [image.id, {'data-img-src'=>image.image_file_url(:thumb)}, {'image_value'=>image.image_file_url(:thumb)}]}), {:include_blank => 'Choose None'}, class: "image-picker", id: "tshirt-design" %>

html version: 

<input type="hidden" value="1" name="stuffs" id="stuffs2" />
<select class="image-picker" id="tshirt-design" name="stuffs3">       
   <option value="">Choose None</option>
   <option data-img-src="1.url.com" value="1">
   </option>
   <option data-img-src="2.url.com" value="2">
   </option>
   <option data-img-src="3.url.com" value="3">
   </option>
   <option data-img-src="5.url.com" value="5"></option>
</select>

Затем я нахожу изображение из переданного идентификатора, что, это важно дляпродолжайте в том же духе (используя Id, так как яИдентификатор позже при отправке формы)

Вопрос:

Как разрешить сохранение изображений data-img-src?

какможно ли использовать метод data-img-src или другое решение, позволяющее использовать выделение images = {} для работы с идентификатором?

Мне просто нужно решение, позволяющее загружать изображения на холстиз меню выбора, чтобы можно было сохранить! Что не так с моим кодом

ОБНОВЛЕНИЕ |РЕДАКТИРОВАТЬ:

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

Это загрузчик файлов: 

document.getElementById('file').addEventListener("change", function(e){
  var reader = new FileReader();

  reader.onload = function (event){
    var imgObj = new Image();
    imgObj.src = event.target.result;

    imgObj.onload = function () {
      var img = new fabric.Image(imgObj);

      img.scaleToHeight(300);
      img.scaleToWidth(300);
      canvas.centerObject(img);
      canvas.add(img);
      canvas.renderAll();
    };
  };

  if(e.target.files[0]){
    reader.readAsDataURL(e.target.files[0]);
  }
}, false);

Затем изображение добавляется на холст и может быть красиво сохранено.

Загрузчик меню выбора: 

function updateTshirtImage(imageURL){
  fabric.Image.fromURL(imageURL, function(img) {
    img.scaleToHeight(300);
    img.scaleToWidth(300);
    canvas.centerObject(img);
    canvas.add(img);
    canvas.renderAll();
  });
}

document.getElementById("tshirt-design").addEventListener("change", function(e){
  updateTshirtImage(this.value);
}, false);

Это то, что работает (наполовину). Кажется, что-то ломает кнопку сохранения в Chrome. Я не уверен, почему, но я предполагаю, что способ, которым изображение добавляется к холсту, отличается в последнем, вызывая эти проблемы. Это полностью отличается от того, что я думал, проблема была упомянута в начале, но это может быть первым шагом в решении этого уравнения

...