Canvas сохранить как картинку

Как сохранить canvas в jpg с учетом использования drawImage?

Если использовать код как есть — сохраняет пустую область. Если перед сохранением нарисовать например линию — сохранится пустая область с линией, без картинки. В браузере выглядит как надо.
P.S
Пробовал на хостинге с ссылкой на img url (с того же хостинга-домена) результат тот же.

function draw() < var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() < ctx.drawImage(img, 0, 114, 600, 486); >; img.src = "file:///C:/Users/1/Desktop/1.jpg"; var link = document.getElementById('link'); link.setAttribute('download', 'MintyPaper.jpg'); link.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream")); >

• Вопрос задан более двух лет назад
• 234 просмотра

Комментировать
Решения вопроса 1
Софт для автоматизации

Я тут вижу две возможные причины причины, почему не работает.

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

Ответ написан более двух лет назад
Нравится 1 9 комментариев
genezis1111 @genezis1111 Автор вопроса

поставил паузу 2 сек на canvas.toDataURL(«image/jpg»)
в консоли получаю ошибку:
«Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported»

Испорченный холст, хотя отображается все как нужно в теге

genezis1111, я постараюсь помочь, но для начала объясните мне чего вы хотите добиться вообще. Какова конечная цель?

genezis1111 @genezis1111 Автор вопроса

Надим Закиров, на хостинг закинул код + поставил setTimeout — и все получилось!
Конечная цель: берем картинку в канвас (drawImage) добавляем на нее геометрические фигуры, затем сохраняем отредактированную картинку.
На хостиге теперь с setTimeout все работает.
Но для выполнения задачи мне необходимо это выполнить на локальном компьютере. При скачивании файлов с хостинга на компьютер (пути все проверил) я получаю ошибку на этапе когда уже отредактированное изображение у меня на экране, и скрипт пытается выполнить canvas.toDataURL(«image/jpg»)

Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported

genezis1111, это потому что у вас не совпадает происхождение документа и картинки. Вы говорите, что нужно все теперь повторить локально. откуда в будущем планируйте брать картинку? С компа юзера или откуда-то из сети?

Курсы javascript

Этот код сохраняет рисунок из canvas в формате jpg но имеет тип
easytoshop, приходится переименовывать. Что то не получается присвоить файлу расширение при сохранении.

02.04.2018, 06:08
Регистрация: 20.12.2009
Сообщений: 1,714

Используйте атрибут download, чтобы указать имя сохраняемого файла

var dataURL = canvas.toDataURL("image/jpeg"); var link = document.createElement("a"); link.href = dataURL; link.download = "my-image-name.jpg"; link.click();

02.04.2018, 16:11
Регистрация: 11.02.2015
Сообщений: 254

Пришёл к выводу, что это сделать не возможно. Если имеем имя с расширением, то просто откроется в браузере. Так что серию картинок из canvas можно сохранить только типа easytoshop на компьютер. А потом по одной переименовывать с любым расширением. Хорошо получается с jpg, но сам файл в базе64 всё равно png.

02.04.2018, 16:43
Регистрация: 11.02.2015
Сообщений: 254

Попробуйте. На ваш компьютер загрузится 10 картинок, килобайт по 10. Проверял в браузерах на базе хром.

Создание изображений с помощью canvas

От автора: как Вы знаете в данное время веб-сайты, да и, конечно же, интернет стали настолько популярны, что применяются и решают определенные поставленные задачи практически во всех сферах деятельности человека. Таких как работа, учеба, развлечения, охрана здоровья и т.д. То есть другими словами, если сейчас мы говорим сайт, то мы не предполагаем, что это будет простая страница, на которой отображен текст и некоторое количество изображений. Мы предполагаем некий ресурс, который в той или иной степени обладает определенным функционалом и что то, предлагает или же выполняет для его посетителей. А значит, перед разработчиками постоянно ставят достаточно сложные и интересные задачи, которые приходится решать и поэтому, в этом уроке я хотел бы поделиться с Вами одной из таких задач.

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

Таким образом, в данном уроке мы с Вами реализуем функционал создания изображений на лету, прямиком в браузере.

Теперь несколько слов о том, что такое canvas. Конечно, Вы можете спросить, почему несколько, почему бы в полной мере не осветить данную тему? И ответ банально прост – это нехватка времени, потому как для этого потребуется полноценный видео-курс. Итак, canvas от англ. canvas — “холст” – это элемент спецификации HTML5, который предназначенный для создания растрового двухмерного изображения при помощи JavaScript. И, как правило, используется для рисования графиков для статей и игрового поля в некоторых браузерных играх.

Теперь, давайте рассмотрим, простую HTML страницу, которую мы будем использовать в данном уроке:

Python-сообщество

• Начало
• » GUI
• » canvas to jpg or bmp

#1 Авг. 7, 2013 21:02:10

RoDebian Зарегистрирован: 2013-06-26 Сообщения: 24 Репутация: 0 Профиль Отправить e-mail

canvas to jpg or bmp

вообщем необходимо сохранить график построенный с помощью canvas в доступный графический формат(jpg,bmp,png).

есть варианты как это сделать.

#2 Авг. 7, 2013 21:28:20

4kpt От: Харьков Зарегистрирован: 2010-11-03 Сообщения: 998 Репутация: 63 Профиль Отправить e-mail

canvas to jpg or bmp

Явного механизма не вижу. Почему бы не строить файли изображения параллельно с построением графика на caanvas. Для этого подойдет библиотека PIL…

#3 Авг. 7, 2013 21:31:25

4kpt От: Харьков Зарегистрирован: 2010-11-03 Сообщения: 998 Репутация: 63 Профиль Отправить e-mail

canvas to jpg or bmp

Нашел. Можно сделать снимок определенной части экрана. Потом его перевести в jpeg и все будет супер.
Нужно предварительно только узнать относительно месторасположение вашего Canvas и все будет супер 🙂
Нужен пример — пишете…

Отредактировано 4kpt (Авг. 7, 2013 21:31:56)

#4 Авг. 7, 2013 22:00:26

RoDebian Зарегистрирован: 2013-06-26 Сообщения: 24 Репутация: 0 Профиль Отправить e-mail

canvas to jpg or bmp

c PIL сейчас пытаюсь разобратся, но что то дела неладится.

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

был бы рад примерам с PIL и для второго способа

#5 Авг. 7, 2013 22:30:36

4kpt От: Харьков Зарегистрирован: 2010-11-03 Сообщения: 998 Репутация: 63 Профиль Отправить e-mail

canvas to jpg or bmp

Вы шутите? Какое Вам дело до того, что двигает юзер?
Вы получаете информацию о рассположении виджета на экране. Единственное условие — изображение должно быт на экране… Можно это обеспечить секундным перемещением изображения на нужное место и возвращение его назад, если оно скрыто или отображено не полностью.

P.S. Надеюсь мы говорим о Tkinter?

Отредактировано 4kpt (Авг. 7, 2013 22:32:04)

#6 Авг. 7, 2013 22:35:54

4kpt От: Харьков Зарегистрирован: 2010-11-03 Сообщения: 998 Репутация: 63 Профиль Отправить e-mail

canvas to jpg or bmp

Так это Tkinter?

#7 Авг. 7, 2013 22:46:14

RoDebian Зарегистрирован: 2013-06-26 Сообщения: 24 Репутация: 0 Профиль Отправить e-mail

canvas to jpg or bmp

да, он самый. я почему то решил что определение координат будет происходить в момент отрисовки канваса. Так примерами порадуете?

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

#8 Авг. 7, 2013 23:54:38

4kpt От: Харьков Зарегистрирован: 2010-11-03 Сообщения: 998 Репутация: 63 Профиль Отправить e-mail

canvas to jpg or bmp

RoDebian
да, он самый. я почему то решил что определение координат будет происходить в момент отрисовки канваса. Так примерами порадуете?кстати возникла проблема с PIL:отрисовка графика происходит в отдельной фунции ( овал он же элипс), сделл переменные овала глобальными. сделал это для того что бы в функции которая овечает за создание графического файла был доступ к переменным. проблема в том что ничего не отрисовывается. когда вбиваю данные происзвольно за место переменнх все строится отлично. стоит использовать переменные из функции которая отвечает за отрисовку канваса то создается чистый файл изображения. через принт значения переменых выводятся.

Нужно смотреть. Где-то делаете ошибку. Нужен код. Сложно догадаться, что Вы не так делаете. Может неправильно задаете исходный файл или не сохраняете или не та модель. Я не знаю…

Почти все сделано, но нужно допилить. В случае, если окно частично спрятано нужно его на микросекунду вынести из области и опять вернуть. Если у Вас не получится — напишите. Просто уже поздно и охота спать. Очень охота 🙂

# coding: utf-8 import Tkinter import Image import ImageTk import ImageGrab def get_foto(event): lpx = canv.winfo_rootx() + 2 lpy = canv.winfo_rooty() + 2 rpx = lpx + canv.winfo_width() - 4 rpy = lpy + canv.winfo_height() - 4 # Если нужно сохранить замените show() на save("имя_файла.jpg") img = ImageGrab.grab([lpx, lpy, rpx, rpy]).show() root = Tkinter.Tk() root.geometry("600x600+100+100") root.focus_force() canv = Tkinter.Canvas(width=400, height=400, bg="red", bd=2, relief="ridge") canv.place(relx=0.5, rely=0.5, anchor="center") img = Image.open("Front.jpg").resize([300, 300]) img_tk = ImageTk.PhotoImage(img) canv.create_image([200,200], image=img_tk, anchor="center") but = Tkinter.Button(root, text=u"Хочу фото. Очень хочу.", font=14) but.place(relx=0.5, rely =0.9, anchor='center') but.bind("", get_foto) root.mainloop() 

P.S. Классное фото приклеиваю 🙂
P.S.S. На фото скан обожки очень яркого (в музыкальном плане) альбома 🙂

Отредактировано 4kpt (Авг. 7, 2013 23:55:36)

Прикреплённый файлы:
Front.jpg (493,3 KБ)