Могу ли я получить данные межсайтового тега <img /> в виде большого двоичного объекта? - PullRequest
Новая
       17

Могу ли я получить данные межсайтового тега <img /> в виде большого двоичного объекта?

3 голосов
/ 08 марта 2012

Я пытаюсь сохранить пару изображений, на которые ссылается веб-страница, в автономном хранилище. Я использую IndexedDB в Firefox и FileSystem API в Chrome. Мой код на самом деле является расширением, поэтому в Firefox я работаю на Greasemonkey и на Chrome в качестве скрипта контента. Я хочу, чтобы это было автоматизировано.

У меня проблема при получении файла изображения. Я использую пример кода из статьи под названием Хранение изображений и файлов в IndexedDB , но я получаю сообщение об ошибке: изображения, которые я пытаюсь загрузить, находятся на другом поддомене, и XHR завершается ошибкой. 

XMLHttpRequest cannot load http://...uxgk.JPG. Origin http://subdomain.domain.com is not allowed by Access-Control-Allow-Origin.

В Firefox я, вероятно, мог бы использовать GM_xmlhttpRequest, и это сработало бы (код работает в обоих браузерах, когда я нахожусь в URL одного и того же происхождения), но мне все еще нужно решить проблему для Chrome, в которой другие ограничения (а именно, необходимость взаимодействия с фреймами на странице хоста) требует, чтобы я включил свой сценарий в страницу и утратил свои привилегии.

Итак, я возвращаюсь к тому, что я пытаюсь найти способ сохранения изображений, которые связаны (и могут появляться на) странице, с IndexedDB и / или FileSystem API. Мне нужно либо понять, как решить проблему перекрестного источника в Chrome (и если для этого требуются привилегии, мне нужно исправить способ взаимодействия с jQuery), либо использовать какой-то обратный createObjectURL . В конце дня мне нужен большой двоичный объект (насколько я понимаю, объект File) для помещения в IndexedDB (Firefox) или для записи в FileSystem API (Chrome)

Помогите, кто-нибудь?

Редактировать: мой вопрос на самом деле может сводиться к тому, как я могу использовать jQuery так, как я хочу, не теряя своих привилегий для скриптов контента в Chrome. Если я это сделаю, я мог бы также использовать перекрестные источники XHR на Chrome . Хотя я бы предпочел получить решение, которое не зависит от этого. В частности, поскольку я хотел бы получить это решение, если я включу сценарий в веб-страницу и не требую, чтобы он был сценарием содержимого / usercript.

Редактировать: я понял, что вопрос только о межсайтовых запросах . Сейчас у меня есть один из трех способов получить блоб изображения с помощью @ chris-sobolewski, этих вопросов и некоторых других страниц (например, this ), что можно увидеть в этой скрипке . Тем не менее, все они требуют специальных привилегий для запуска. Увы, поскольку я работаю на странице с фреймами, из-за известного дефекта в Chrome я не могу получить доступ к фреймам. Поэтому я могу загрузить скрипт в каждый кадр, используя all_frames: true, но я действительно хочу избежать загрузки скрипта при каждой загрузке кадра. В противном случае, в соответствии с этой статьей , мне нужно выйти из песочницы, но затем он вернется к привилегиям.

1 Ответ

2 голосов
/ 08 марта 2012

Поскольку вы работаете в Chrome и Firefox, ваш ответ, к счастью, да (вроде как). 

function base64img(i){
    var canvas = document.createElement('canvas');
    canvas.width = i.width;
    canvas.height = i.height;
    var context = canvas.getContext("2d");
    context.drawImage(i, 0, 0);
    var blob = canvas.toDataURL("image/png");
    return blob.replace(/^data:image\/(png|jpg);base64,/, "");
}

это вернет закодированное изображение base64.

оттуда вы просто вызываете функцию как-то так: 

image = document.getElementById('foo')
imgBlob = base64img(image);

Тогда иди и сохрани imgBlob.

Редактировать: Поскольку размер файла имеет значение, вы также можете сохранить данные в виде canvasPixelArray, который имеет ширину * высоту * 4 байта размером. 

imageArray = context.getImageData( 0, 0 ,context.canvas.width,canvasContext.canvas.height );

Тогда JSONify массив и сохранить это?

...