Показать сообщение отдельно
  #1 (permalink)  
Старый 04.03.2014, 17:20
Аватар для grafe
Интересующийся
Отправить личное сообщение для grafe Посмотреть профиль Найти все сообщения от grafe
 
Регистрация: 15.09.2011
Сообщений: 17

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

* оставлять картинку с внешним урл нельзя
* в 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 перегнать... но к элементам ифрейма с другого домена не достучишься...

Последний раз редактировалось grafe, 04.03.2014 в 20:26.
Ответить с цитированием