сохранить div как изображение при следующем нажатии

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

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

 $(function() {
  var element = $("#firstshirt"); // global variable
  var getCanvas; // global variable
  $("#btn-Preview-Image").on('click', function() {
    html2canvas(element, {
      allowTaint: true,
      logging: true,
      onrendered: function(canvas) {
        $("#previewImage").append(canvas);
        getCanvas = canvas;
      }
    });
  });
});

 <input id="btn-Preview-Image" type="button" value="Preview" />

1. canvas2image

2. я также хочу разрешить значение: true

3. @adeneo, эта библиотека кажется действительно полезной только для преобразования в bmp… В противном случае все, что он делает, это вызывает toDataURL , когда сегодня почти всегда предпочтительнее использовать асинхронный toBlob .

4. @Kaiido — Конечно, если ему просто нужно работать в Firefox и последней версии Chrome, его почти всегда предпочтительнее использовать toBlob . Некоторые из нас по-прежнему должны поддерживать и другие браузеры. Я предложил библиотеку, потому что она, казалось, делала то, что хотел OP, получая изображение с холста и даже загружая его для вас.

5. @adeneo для toBlob есть полизаполнения, которые позволят ему работать в любом браузере, поддерживающем конструктор больших двоичных объектов (IE10 ). Библиотека, на которую вы ссылались, полезна только для преобразования в bmp, проверьте источники. Чтобы сохранить результат, лучше использовать выделенную библиотеку, например fileSaver.js , для которого в качестве входных данных требуется большой двоичный объект. canvas2image делает window.open это только с использованием библиотеки, застрявшей со старым методом, таким как toDataURL, для выполнения window.open(canvas.toDataURL()) , который кажется мне действительно громоздким.

Ответ №1:

один из способов сделать это — использовать html2canvas

вот ссылка: http://html2canvas.hertzen.com/examples.html

1. мне нужно сохранить в базе данных при отправке

2. как только вы получите его как изображение, закодируйте с помощью base64 и сохраните в базе данных с помощью вызова ajax. Или вы также можете использовать традиционный стиль формы, где при нажатии получить изображение холста в виде строки base64, установить его как скрытое / видимое значение текстовой области и отправить форму.