Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   пересохранение картинки с внешнего ресурса (https://javascript.ru/forum/css-html/45528-peresokhranenie-kartinki-s-vneshnego-resursa.html)

grafe 04.03.2014 17:20

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

* оставлять картинку с внешним урл нельзя
* в base64 тоже нельзя отображать.(на мобильных устройствах с этим не всё хорошо и если не ошибаюсь у ie очень ограничена длина строки base64)
* использовать flash тоже крайне нежелательно

всё бы ничего, казалось бы- возьми, отправь src картинки и сервак её пересохранит. НО! совсем не факт, что сервак получит то же, что и клиент. банально какая- нибудь авторизация на внешнем ресурсе не вернёт моему серверу то, что возвращает клиенту. по тому единственный вариант- брать картинку с клиента. тоже долго думали как извернуться- вот пока что есть.

реализация-
function outerTo64(path) {  
	var 
		image = new Image(),
		canvas = document.createElement("canvas"),
		ctx,dataURL;
	image.setAttribute("crossorigin", "anonymous");  
	image.src=path;
	
	image.onload=function(){
		canvas.width = this.width;  
		canvas.height = this.height;  
		ctx = canvas.getContext("2d");
		ctx.drawImage(this, 0, 0);  
		dataURL = canvas.toDataURL("image/jpg");  
		image = new Image();
		document.body.appendChild(image);
		image.setAttribute('src',dataURL)
	};
}  
outerTo64('http://yandex.st/images-thumbs/_/rAfkFd7fiqP6iIMMuj3uILFDmgQ.jpg');//яндекс отдаст контент
outerTo64('http://graf-pnd.com/img/foton.jpg');//а тут хедер спецательный не посылается- и картинку не можем получить


проблемы:
*на сервере нужно обратно из base64 конвертировать в картинку. а с этим могут быть (по слухам и домыслам) проблемы, тк разные браузеры на выходе (ВРОДЕ КАК) по разному могут выдавать base64. типа ie из строки вырезает вертикальные чёрточки, но до этого не дошёл ещё, подтвердить не могу.
*проблема с кроссдоменным получением картинки.нельзя сфэтчить картинку с внешнего домена в канвас даже указав в самой картинке аттрибут crossorigin. только если сервак посылает хэдер "Access-control-allow-origin": "*" не знаю, можно это как- то решить, какими- то обходными путями? ещё в поиске решений как это делается.

к стати, может кто знает, есть ли опция получить бинарник картинки по средствам js? а то, base64 тоже не очень желательно на сервак гонять (ребятам придётся много чего переделывать)
конвертировать канвас в blob не вариант- нужен полный саппорт ie8, а метод canvas.toBlob() саппортится только с ie10+

говорят надо порыть в сторону userJS, кто что знает по этой теме?

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

Deff 04.03.2014 23:43

Цитата:

Сообщение от grafe
но к элементам ифрейма с другого домена не достучишься...

Ну в старых ие и опере можно
2. Проще всё жа с серва брать, хотя опыт тырки картинок с гугла имеется, но Гугол чичас закрыл дырку в своём браузере,

Ну как пример идеи http://javascript.ru/forum/project/3...er-frejjm.html

grafe 05.03.2014 12:56

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


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