Возможно ли с помощью js вытащить картинку из тега img?

Question

[Александр Кулинич]

Здравствуйте.

Пусть в html страничке есть тег:
<img src="link"/>

Возможно ли вытащить отрендереную браузером картинку используя java script? Т.е. загружать еще раз изображение по ссылке link нельзя.

Буду рад любой информации.
Спасибо.

Comments

[ILE -Salim]

Александр, вы хотите вытащить путь изображения из тега img?

[Александр Кулинич]

ILE -Salim: нет, картинку например в base64

Answer 1

[Евгений Петров]

Загоняем картинку в canvas и сохраняем в base64 в выбранном формате.
А вообще такие вещи гуглятся на раз-два.

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

HTML

<img id="myImage" src="/i/pic.png">
<canvas id="myCanvas"></canvas>

JS

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

if (!myImage.complete) {
	myImage.addEventListener('load', function (e) {
		done();
	});
} else {
	done();
}

function done () {
	myCanvas.width = myImage.width;
	myCanvas.height = myImage.height;
	context.drawImage(myImage, 0, 0);
	console.log(myCanvas.toDataURL());
}

Comments

[Александр Кулинич]

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

[Александр Кулинич]

Суть в том, чтобы обращение по ссылке link происходило только один раз.

[Евгений Петров]

Чего?) Пока картинка не загрузится, её данные не получится использовать в canvas. То есть до использования в canvas изображение должно быть загружено. Показывать его или нет — ваше дело. По второй ссылке его не вставляют в документ, а сразу используют в canvas.

[Александр Кулинич]

Евгений Петров: Пусть картинка уже вставлена в документ. Хочется ее достать не используя ссылку. В первом документе мы в canvas передаем ссылку, во втором тоже ссылкой на картинку пользуемся. Эти варианты не подходят.

[Александр Кулинич]

Евгений Петров: либо, я что-то не понимаю...

[Евгений Петров]

Вы смеётесь, что ли? У вас есть загруженное изображение, и ссылку на элемент img вы передаёте в canvas. Смотрите внимательно на примеры кода.

[Евгений Петров]

Вы просто что-то не понимаете. Ничего там 2 раза не грузится. Загрузили данные с сервера и отдали ссылку на изображение в canvas.

[Александр Кулинич]

Евгений Петров: если делать вот так

<script>
        var pic = document.getElementById("pic");
        var example = document.getElementById('example');
        ctx = example.getContext('2d');
        ctx.drawImage(pic, 10, 10);
    </script>

то картинка загружается заново при отображении в canvas.

[Александр Кулинич]

Евгений Петров: example - это canvas, прошу прощение за неудачное название.

[Александр Кулинич]

Евгений Петров: да, для локальных ресурсов это работает, у меня тоже получилось. Спасибо за помощь!

p.s. но к сожалению, как раз политике происхождения мое изображение не удовлетворяет :)

[Александр Кулинич]

Евгений Петров: видимо через js, так картинки с другого домена не добыть)