Javascript.RU

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

Как отобразить зашифрованную картинку через cryptoJS?
Шифруется паролем 123456.
https://codepen.io/accountnujen/pen/xxQvQma
Когда пытаешься расшифровать и вывести через blob - ничего не выдаёт. ошибок тоже.
Ответить с цитированием
  #2 (permalink)  
Старый 15.08.2023, 09:58
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,709

Так работает
const imageInput = document.getElementById('imageInput');
    const encryptedTextDiv = document.getElementById('encryptedText');
    const decryptionKeyInput = document.getElementById('decryptionKey');
    const decryptButton = document.getElementById('decryptButton');
    const decryptedImageDiv = document.getElementById('decryptedImage');

    imageInput.addEventListener('change', (event) => {
      const selectedImage = event.target.files[0];
      const key = "123456";

      const reader = new FileReader();
      reader.onload = function(event) {
        const encryptedImage = CryptoJS.AES.encrypt(event.target.result, key).toString();
        localStorage.setItem('encryptedImage', encryptedImage);

        encryptedTextDiv.textContent = encryptedImage.toString();
      };
      reader.readAsDataURL(selectedImage);
    });

    decryptButton.addEventListener('click', () => {
      const decryptionKey = decryptionKeyInput.value;
      const encryptedImage = localStorage.getItem('encryptedImage');

      const decryptedBytes = CryptoJS.AES.decrypt(encryptedImage, decryptionKey).toString(CryptoJS.enc.Utf8);
     // const decryptedImageBlob = new Blob([decryptedBytes], { type: 'image/jpeg' });

     // const decryptedImageURL = URL.createObjectURL(decryptedImageBlob);
     const img = document.createElement('img');
      img.src = decryptedBytes;

      decryptedImageDiv.innerHTML = '';
      decryptedImageDiv.appendChild(img);
    });
Ответить с цитированием
  #3 (permalink)  
Старый 15.08.2023, 10:58
Интересующийся
Отправить личное сообщение для accountnujen Посмотреть профиль Найти все сообщения от accountnujen
 
Регистрация: 23.01.2022
Сообщений: 17

voraa,
мда... спасибо.
подскажите пожалуйста, а как мне его в blob перевести, чтобы можно было отправить через formData? Если я ему подсовываю decryptedBytes, то мне возвращается ошибка
Ответить с цитированием
  #4 (permalink)  
Старый 15.08.2023, 11:07
Интересующийся
Отправить личное сообщение для accountnujen Посмотреть профиль Найти все сообщения от accountnujen
 
Регистрация: 23.01.2022
Сообщений: 17

const dataUrl = decryptedBytes;
const [header, body] = dataUrl.split(",");
const decodedBody = atob(body);
const byteCharacters = decodedBody.split("").map(char => char.charCodeAt(0));
const byteNumbers = new Uint8Array(byteCharacters);
const blob = new Blob([byteNumbers], {type: "image/jpeg"});
Ответить с цитированием
  #5 (permalink)  
Старый 15.08.2023, 11:21
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,709

Вы читаете через readAsDataURL. При этом результатом является строка в кодировке base64. Читайте через readAsArrayBuffer. Но тогда кодировать и декодировать нужно не строку, а типизированный массив. Ищете в документации, как это сделать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вставить картинку внутрь видео через drag and drap? amsterdam23 Элементы интерфейса 7 26.01.2016 14:07
Как отобразить данные в iframe через атрибут src в Internet Explorer? Heisenberg (X)HTML/CSS 1 27.10.2015 22:40
как передать php массивы через ajax Evsik AJAX и COMET 11 11.07.2015 06:32
Как вывести картинку по запросу Bon Events/DOM/Window 2 04.04.2012 02:20
как вывести картинку по запросу Bon Общие вопросы Javascript 0 03.04.2012 13:29