Рисование

@body90 · Регистрация: 26.05.2009

Author24 — интернет-сервис помощи студентам

Здравствуйте! У меня есть <img> и переменная с текстом. Я могу как-то с помощью JavaScript написать этот текст на изображении?

Добавлено через 23 минуты
Уточню. Рисовать не обязательно в <img>. Но в конечном итоге мне нужно иметь изображение с текстом на белом фоне, которое можно охранить браузером.

@kalabuni · 25.05.2013, 08:02

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

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

@Good-bad man · 25.05.2013, 13:11

Я так понял, вам надо, чтобы пользователь мог сохранить результат? Рисуете на канвасе, потом делаете так:

Javascript

1 2	var img = document.getElementById('result-image'); img.src = canvas.toDataURL('image/png');

@body90 · 26.05.2013, 05:38 **[ТС]**

А как мне мой текст вообще вписать в Конвас?

Добавлено через 7 часов 28 минут
Это выходит, что и изображение и конвас будет видно на странице? А можно второго как-то скрыть?

Добавлено через 1 час 33 минуты
Добрался до спецификации. Хотя, пока что не дошло как распологать и переносить строки для изображения.
Появился ещё один вопрос. Как отвязать разрешение картинки от размера самого <canvas>. Т.к. для текста нужно много места, а места на странице очень мало.

@Good-bad man · 26.05.2013, 10:55

Необязательно вообще что-либо отображать кроме результата:

HTML5

<!doctype html>
<html>
<head>
<script type="text/javascript">
// Создаём элемент img
var img = document.createElement('img');
// Функция, которая выполнится, когда изображение загрузится
img.onload = function() {
  // Создаём канвас и устанавливаем его размеры равными размерам изображения
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  
  // Получаем контекст
  var context = canvas.getContext('2d');
  
  // Рисуем загруженное изображение
  context.drawImage(img, 0, 0);
  
  // Устанавливаем параметры шрифта
  context.strokeStyle = '#000';
  context.lineWidth = '1px';
  context.textBaseline = 'middle';
  context.font = 'bold 24px';
  context.fillStyle = '#fff';
  // Рисуем текст: первый параметр - текст, второй и третий - координаты
  context.fillText('123456789', (img.width - 24 * 9) / 2, img.height / 2);
  
  // Создаём новое изображение
  var newImg = document.createElement('img');
  // Помещаем в него изображение с канваса
  newImg.src = canvas.toDataURL('image/png');
  // Добавляем это изображение на страницу
  document.getElementsByTagName('body')[0].appendChild(newImg);
}
// Загружаем изображение
img.src = 'image.png';
</script>
</head>
<body></body>
</html>

Но если нужно что-то скрыть со страницы, то вот:

Javascript

1 2	var elem = document.getElemenyById('your-elem'); elem.style.display = 'none';

@body90 467 / 344 / 19 Регистрация: 26.05.2009 Сообщений: 2,696
		1
	Рисование 25.05.2013, 05:58. Показов 1324. Ответов 4 Метки нет (Все метки) Здравствуйте! У меня есть <img> и переменная с текстом. Я могу как-то с помощью JavaScript написать этот текст на изображении? Добавлено через 23 минуты Уточню. Рисовать не обязательно в <img>. Но в конечном итоге мне нужно иметь изображение с текстом на белом фоне, которое можно охранить браузером. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	25.05.2013, 08:02	2
	по определению браузер не может создавать и сохранять файлы, тем более двоичные браузер может только отобразить что-то в т.ч. можно "наложить" сверху надпись на картинку но от этого сам файл картинки никак не изменится 1

@body90 467 / 344 / 19 Регистрация: 26.05.2009 Сообщений: 2,696
	26.05.2013, 05:38 [ТС]	4
	А как мне мой текст вообще вписать в Конвас? Добавлено через 7 часов 28 минут Это выходит, что и изображение и конвас будет видно на странице? А можно второго как-то скрыть? Добавлено через 1 час 33 минуты Добрался до спецификации. Хотя, пока что не дошло как распологать и переносить строки для изображения. Появился ещё один вопрос. Как отвязать разрешение картинки от размера самого <canvas>. Т.к. для текста нужно много места, а места на странице очень мало. 0

	26.05.2013, 10:55