Отправка формы скрытого поля или холста с помощью javascript и .or ajax? - PullRequest
Новая
       49

Отправка формы скрытого поля или холста с помощью javascript и .or ajax?

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

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

Код:

Вид: 

...
<%= ff.hidden_field :print_file, id: "canvascontent" %>
<a id="lnkDownload" title="Save">Save</a> #this is the button that saves form
<canvas id="fCanvas"></canvas>
...
<%= f.submit "Save" %>

Javascript: 

#canvas/fabric js code here
...
#save button code
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e) {
   this.href = canvas.toDataURL({
      format: 'png',
      quality: 0.8
   });
   this.download = 'saved_image.png'
};

#form submit save attached to hidden field
var url = canvas.toDataURL('image/png')
$("#canvascontent").val(url);

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

Есть ли способ сохранить холст при отправке формы, который пропустит холст так же, как кнопка сохранения?

Я могу принять только данные холстаостается, прежде чем он может быть отправлен на отправку формы.

Любые идеи о том, как я могу заставить это работать?

Попытки запуска toDataURL: 

<a id="setDownload" title="Save">Save</a>

var imageSetter = document.getElementById('setDownload');
   imageSetter.addEventListener('click', setImage, false);
   function setImage(e) {
      this.href = canvas.toDataURL({
          format: 'png',
          quality: 0.8
      });
   $("#canvascontent").val(this.href);
};

Это попытка «установить» изображение. Когда я нажимаю setDownload, он работает, и он сохраняет холст, как я хочу с отправкой формы. Она успешно попадет в мою модель

Теперь я пытаюсь вызвать imageSetter следующим образом ...

Функция updateImage успешно добавляет изображения на холст. 

function updateImage(imageURL){
    fabric.Image.fromURL(imageURL, function(img) {
        #canvas_image_rendering_code
        }, {crossOrigin: 'anonymous'});
    var url = canvas.toDataURL({
        format: 'png',
        quality: 0.8
    });
    setImage();
};

При этом сохраненное изображение остается пустым ... по какой-то причине setImage не вызывается? или так я подумал ...

Я также подумал, что, может быть, холст не был загружен, поэтому я попытался setTimeout(setImage(), 3000);, что не идеально, даже если оно работает, но хотел посмотреть.

Тогдая подумал, это даже вызывается?

Так что я установил setImage в качестве предупреждения для se, если он вызывает его 

function setImage() {
  alert("Hello");
}

И это вызывается .. выскакивает предупреждениекогда я выбираю изображение для холста

Как я могу вызвать функцию setImage из этой функции и заставить ее работать так же, как когда я нажимаю setDownload?

Что такоерассказ о том, почему это происходит?

Ключи:

  1. Сохраняет холст при отправке формы, когда я нажимаю setDownload ссылка href.
  2. вызывая setImage функцию внутри *Функция 1059 * работает с примером предупреждения, но не с настройкой изображения с помощью toDataURL.
...