JS с помощью шифровать изображение

Question

У меня есть решение для шифрования содержания изображения во время хранения и транспортировки:

1. закодировать содержимое изображения: base64 → AES → base64

2. Получить кодированные данные от AJAX

3. декодировать данные в данные base64 от encryptTo.js

4. Сделать изображение объекта по данным URL, например:

    var image = new Image(); 
       image.src="data:image/jpeg,"+imgData. 
   

5. Показать изображение объекта

Это решение работает на Firefox и Safari. Но это не работает в Internet Explorer или Google Chrome.

Причина в том, что URL-адрес данных (шаг 4) не поддерживается в Internet Explorer или Chrome очень хорошо. Объект изображения не может быть создан.

Я искал и обнаружил, что формат файла MHT хорошо поддерживается Internet Explorer. Но похоже, что он может быть вставлен только в статический файл.

Я думал об использовании VBScript для вызова некоторых приложений ActiveX для решения этой проблемы. Но я не знаком с VBScript.

Я хочу получить помощь, чтобы выяснить, как это сделать, чтобы решить эту проблему. MHT или VBScript с ActiveX? Что предпочтительнее и проще?

Спасибо!

Answer 1

Обновление: Я предоставляю рабочий код OP для загрузки изображения с помощью JavaScript. Пример имеет два изображения: один с URI данных, встроенный непосредственно в HTML, а другое изображение с URI данных, созданным обратным вызовом Ajax после загрузки текстового файла, содержащего данные изображения base64. Пожалуйста, обратите внимание, что

• Пробел официально небезопасен/не поддерживается в URL-адресах, поэтому я удалил пробелы/строки из данных base64 в текстовом файле досрочно. Вы можете изменить свой код, чтобы сделать это в JavaScript, добавив строку base64img = base64img.replace(/\s+/g, '');
• Вы должны увидеть два изображения при просмотре этой ссылке: http://www.codelib.net/2013/7-9/example.html
• Мой пример использует некоторые очень уменьшенная функции библиотеки для Ajax и т.д., но я не предлагая использовать их. Ваша собственная функция должна работать так же хорошо.
• Результат в моем примере работает в последних версиях Opera, Chrome, Firefox, Safari и Internet Explorer (включая версию 8).
• Хотя вы шифруете и дешифруете свои данные, в принципе, показ изображения работает одинаково. Однако я предлагаю вам просмотреть дешифрованные данные, чтобы убедиться, что ваш алгоритм дешифрования работает правильно во всех браузерах, если у вас все еще есть проблемы с работой.

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

Вы формируете URI данных, используя двоичные данные или оставляя его в кодировке base64? Оставляя его в кодировке base64, вероятно, необходимо избегать некоторых браузеров, пытающихся интерпретировать двоичные данные как символы символа Юникода. Ваше изображение src должно выглядеть так, как показано ниже, но я вижу только ,, а не предыдущий ;base64, поэтому мне интересно, используете ли вы код с кодировкой base64, который безопаснее, чем пытаться использовать двоичные данные (даже если она порождается JavaScript):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg== 

Может быть, все, что вам нужно, чтобы поставить недостающий ;base64 перед запятой, а затем он должен работать. Internet Explorer поддерживает такие URI данных, как это, начиная с версии 8, с гораздо лучшей поддержкой в ​​версии 9. Google Chrome определенно поддерживает этот тип изображения.

Обратите внимание, что пользователи все равно могут сохранить изображение без проблем (я просто попытался сохранить изображение с данными, и даже в Internet Explorer 10 он ничем не отличается от сохранения нормального изображения). Даже если вы отключите правый щелчок, люди все равно могут открыть инспектор документов или его эквивалент и сохранить изображение, просмотрев ресурсы страницы. Вы можете рисовать на элемент canvas, но даже тогда пользователь все равно может сделать снимок экрана и получить пиксельно-пиксельный рендеринг изображения.