задача такова. в визивиг при редактировании когда вставляется картинка с внешнего ресурса (копипастой, например) нужно её посылать на свой сервак, там её куда надо сохраняют и возвращают мне локальную ссылочку, её я подменяю вместо исходной внешней.
* оставлять картинку с внешним урл нельзя
* в 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 перегнать... но к элементам ифрейма с другого домена не достучишься...
