Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как отобразить зашифрованную картинку через cryptoJS? (https://javascript.ru/forum/misc/85423-kak-otobrazit-zashifrovannuyu-kartinku-cherez-cryptojs.html)

accountnujen 15.08.2023 06:18

Как отобразить зашифрованную картинку через cryptoJS?
 
Шифруется паролем 123456.
https://codepen.io/accountnujen/pen/xxQvQma
Когда пытаешься расшифровать и вывести через blob - ничего не выдаёт. ошибок тоже.

voraa 15.08.2023 09:58

Так работает
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);
    });

accountnujen 15.08.2023 10:58

voraa,
мда... спасибо.
подскажите пожалуйста, а как мне его в blob перевести, чтобы можно было отправить через formData? Если я ему подсовываю decryptedBytes, то мне возвращается ошибка

accountnujen 15.08.2023 11:07

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"});

voraa 15.08.2023 11:21

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


Часовой пояс GMT +3, время: 04:06.