Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перенести с картинки в canvas (https://javascript.ru/forum/dom-window/61642-perenesti-s-kartinki-v-canvas.html)

mmmaks2004 27.02.2016 23:28

Перенести с картинки в canvas
 
Подскажите, есть изображение с рукописным текстом в несколько строк.
Его нужно перенести в canvas. Вставка картинки в канвас не проходит, ибо, чтоб распознавалось, нужно писать слева на право в канвасе.
Не подскажете как обработать картинку, чтоб потом ее можно было подогнать под размеры канваса и нарисовать?

ruslan_mart 28.02.2016 02:21

<canvas id="canvas" width="640" height="480"></canvas>
<img alt="" id="myImage" src="myImage.jpg">


var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	image = document.getElementById('myImage');

context.drawImage(image, 0, 0, canvas.width, canvas.height);
image.parentNode.removeChild(image);

mmmaks2004 28.02.2016 10:25

Ruslan_xDD,
А что может быть, не срабатывает getContext('2d'), нет такой функции?
Дело в том, что я пытаюсь добавить в канвас картинку через javascript браузера (добавляю к странице скрипт и запускаю его)

ruslan_mart 28.02.2016 11:22

mmmaks2004, канваса с id="canvas" нет на странице в момент срабатывания скрипта.

mmmaks2004 28.02.2016 11:41

Ruslan_xDD,
спасибо, помогло.
Но тут суть в другом, В Google Docs и в Gmail есть в фишка по вводу рукописного текста (рисуешь мышкой буквы в canvas-е) и он его распознает.
Если просто рисовать картинку, как Вы мне дали, то распознавалка не срабатывает, нужно как-то слева-направо в этом канвасе обвести буквы из вставленной картинки. Это реально?

mmmaks2004 28.02.2016 13:25

Ruslan_xDD,
Не подскажешь, почему может не срабатывать
var pixelData = context.getImageData(1,1,20,20)?
Пишет The operation is insecure


Часовой пояс GMT +3, время: 16:12.