Js html2canvas как сохранить в файл

Обновлено: 07.07.2024

В настоящее время я создаю веб-приложение HTML5 / собственное приложение Phonegap, и я не могу понять, как сохранить свой холст в виде изображения с помощью canvas.toDataURL() . Кто-нибудь может мне помочь?

Вот код, что с ним не так?

// Мой холст был назван "canvasSignature"

  • На вопрос 5 OP нет ответа. Он четко сказал, что это для Phonegap / iPad. Приведенные ответы предназначены для сохранения в настольном браузере.
  • 1 Не уверен насчет телефонного разговора, но я сделал это с нуля в родной iOS с помощью JavaScript на другом конце, я собираю данные с помощью .toDataURL() , затем используйте window.location, чтобы указать браузеру appname://[data url] . В конце приложения UIWebView имеет метод делегата, который сообщает, следует ли загружать страницу. Я слушаю appname:// и разбить его, когда он появится, запретить загрузку страницы и захватить URL-адрес данных в нативной строке . насколько вы знакомы с реальным кодом iOS / Objective C?

Вот код. без ошибок.

Это решение позволяет изменить имя загруженного файла:

Вы можете использовать canvas2image для запроса загрузки.

У меня была такая же проблема, вот простой пример, который добавляет изображение на страницу и заставляет браузер загружать его:

Вы можете попробовать это; создать фиктивный HTML-якорь и загрузить изображение оттуда, например .

  • 2 Мне нравится то, что все было сделано на JS, включая создание элемента ссылки. Отлично подходит для автоматизации
  • 1 Идеальное решение

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

  • Классная библиотека. Благодарю. Однако в документации к примеру есть небольшая проблема. Я открыл вопрос на Github, чтобы довести его до вашего сведения.

Эта работа для меня: (Только Google Chrome)

  • Возможно, вы могли бы объяснить ту часть кода, которая отвечает на вопрос, вместо того, чтобы просто вставлять ее без комментариев?

Подобен ответу 1000Bugy, но проще, потому что вам не нужно делать якорь на лету и отправлять событие щелчка вручную (плюс исправление IE).

Если вы сделаете свою кнопку загрузки якорем, вы можете взломать ее прямо перед запуском функции привязки по умолчанию. Так onAnchorClick вы можете установить привязку href к изображению base64 холста, а атрибут загрузки привязки - к тому, что вы хотите назвать своим изображением.

Таким образом, ваш обработчик события щелчка привязки будет следующим (где anchor , canvas и fileName поиск в области видимости):

Вместо imageElement.src = myImage; вы должны использовать window.location = myImage;

Проверьте эту ссылку для получения дополнительной информации.

Кроме того, вы можете преобразовать изображение в base64, а затем сохранить строку в localStorage но это довольно быстро заполнит вашу квоту, если у вас много изображений или изображений в высоком разрешении.

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

Я делаю это, используя этот код

данные: изображения /PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf /6el6 /6ZnpSW /zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW /vkdrfx3H3yfT2tVzaP26X6hkw1q /Boei /280 /29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx /WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 /ldau + Н + Тх /8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi /UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK /eTuQU1YuccCQBW7dyIq38 /j5a /дг /ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J /bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + ГУРК + гм /+ е + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2 /6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6 /eK7eJ /Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HH xgBTky + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ /Xp + PlLtEcs3huGQhO /r17K3rBvuGrEUt8i5HPAkHC /Yt6lKuwYKiuRM9TtGbY0rcerTBLwC /KY1fSNJ /MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5pR3 /zvFZJni /7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk /OiwZViHPQk /LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu /hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O /L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU /SgUJ7WNLjOVH9g8 /Xrv2Fa4P9SM6K7y4t + WXRw76sfVc42fPV936iJ5 + LKrbqTU0P3rA + 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy /HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvV oYY9Y0inIeE + YQQ + cqGGj3dgDtvJjC /mKm7BHmG68lGjO + 0T

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

  • Создать изображение на холсте HTML5, используя генеративный алгоритм
  • Когда изображение будет готово, разрешите пользователям сохранять холст как файл изображения на сервере.
  • Разрешить пользователю либо загрузить изображение, либо добавить его в галерею произведений, созданных с использованием алгоритма.

Однако я застрял на втором этапе. После некоторой помощи от Google я нашел это запись в блоге, которая, казалось, была именно тем, что я хотел:

Что привело к коду JavaScript:

Но, похоже, это вообще ничего не дает.

Больше Googling обнаруживает этот запись в блоге, которая основана на предыдущем уроке. Не сильно отличается, но, возможно, стоит попробовать:

Этот создает файл (yay), но он поврежден и, похоже, ничего не содержит. Он также кажется пустым (размер файла 0).

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

Редактировать

По ссылке Сальвадора Дали я изменил запрос AJAX:

2) Преобразовать изображение холста в формат URL (base64)

3) Отправьте его на свой сервер через Ajax .

3) Сохраните base64 на своем сервере в виде изображения (здесь как это сделать в PHP, те же идеи есть в каждом языке. Сторона сервера в PHP может быть найден здесь):

Если вы хотите сохранить данные, полученные из функции Javascript canvas.toDataURL() , вы должны конвертировать пробелы в плюсы. Если вы этого не сделаете, декодированные данные будут повреждены:

Вот PHP-скрипт:
photo_upload.php

Я думаю, что вы должны перенести изображение в base64 на изображение с BLOB-объектами, потому что когда вы используете base64-изображение, это займет много строк журнала или много строк отправит на сервер. С blob, это только файл. Вы можете использовать этот код ниже:

И код холста здесь:

После этого вы можете использовать ajax с Form:

Этот код использует синтаксис CoffeeScript.

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

1) Я настроил форму, чтобы я мог использовать метод POST.

2) Когда пользователь закончит рисование, он может нажать кнопку «Сохранить».

3) Когда кнопка нажата, я беру данные изображения и помещаю их в скрытое поле. После этого я отправляю форму.

4) Когда форма отправлена, у меня есть небольшой скрипт php:

Я работал над чем-то похожим. Пришлось преобразовать изображение в кодировке Base64 в Uint8Array Blob .

В дополнение к ответу Сальвадора Дали:

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

В противном случае декодирование не будет работать: изображение будет сохранено, но это будет нечитаемый файл.

У меня большая проблема, пожалуйста, помогите мне ! Это мой код :

Если моя точка зрения верна . Чтобы сохранить изображение, для загрузки нужен правильный путь к файлу и имя файла. И я использую html2canvas.js, преобразую цель в изображение . Но когда я хочу сохранить изображение, я не знаю правильного пути к файлу и имени файла.(Потому что изображение-это динамический файл,а не статический?) Как я могу получить правильное значение для сохранения этого изображения? Спасибо!

3 ответа

у меня есть HTML страница источника веб-сайта, сохраненная как строка в string PageSource; мне нужно сохранить ее в базе данных SQL как изображение типа image. Как преобразовать PageSource в byte[] и сохранить его как изображение в базе данных.

Хорошо, я обнаружил canvas2image.js, который делает то, что вам нужно с этой функцией

Вот fiddle

Используйте html2canvas он преобразует html в canvas и использует пакеты canvas2image для преобразования canvas в изображение (или) вы можете передать canvas данные .toDataURL("image/png");

Просто используйте библиотеку html2canvas , просто включите плагин и вызовите метод для преобразования HTML в Canvas, а затем загрузите как изображение PNG

Похожие вопросы:

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

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

Я сделал следующий код для преобразования содержимого HTML (DIV) в изображение (JPEG, PNG,GIF и т. д.) с приведенным ниже кодом. <pre> html2canvas($(.mainbox), < onrendered: function(canvas)

Я хотел бы преобразовать html (например, таблицу) в изображение и сохранить его в виде файла .jpg. И если эта таблица отображается на веб-странице вместе с другими элементами, я хочу только получить.

у меня есть HTML страница источника веб-сайта, сохраненная как строка в string PageSource; мне нужно сохранить ее в базе данных SQL как изображение типа image. Как преобразовать PageSource в byte[].

я уже создал свои данные (шаблон,содержащий изображение,текст, метку и т. д.) внутри div, теперь я хочу преобразовать их в формат изображения. есть ли какая-нибудь техника для преобразования.

Я проверил документ mongolab rest API, но, похоже, API не поддерживает эту функцию. Можно ли преобразовать изображение в base64 и сохранить его в виде строки в mongolab и декодировать его в.

Я создаю образ HTML <div> . Он работает нормально, и изображение визуализируется в другой div с помощью html2canvas.js. Теперь я хочу дать ссылку, чтобы любой желающий мог загрузить.

Как я могу преобразовать выбранное изображение в base64, а затем сохранить его в локальном хранилище для последующего использования? var image = document.getElementById(image);.

Я борюсь с этой ситуацией, когда у меня есть некоторые HTML markup в переменной JavaScript. Что я хочу, так это преобразовать значение этой переменной в изображение и получить значение base64: var.

Читайте также: