В чём ошибка при создании изображение из base64?

Question

[Andrew Morozov]

Подскажите где ошибка, что изображение не отображается когда перевожу из base64 в blob...
Элемент создается, но изображение не показывается

<img src="blob:http://localhost:3005/e478e5ea-14ec-4063-9cd8-392dcf782dcc">

____
Компонент в котором обрезаю фото через плагин react-crop-image

import React, { FC } from 'react';
import ReactCrop, { Crop } from 'react-image-crop';
import { useTranslation } from 'react-i18next';
import Icon from '../icon/Icon';
import 'react-image-crop/dist/ReactCrop.css';
import Style from './CropImage.module.scss';

interface ICropImage {
  minWidth?: number;
  minHeight?: number;
  classes?: string;
  imageSrc: any;
  crop: Crop;
  setCrop: any;
  imgRef: any;
  onSelectFile: any;
  onLoad: any;
}

const CropImage: FC<ICropImage> = ({
  classes,
  minWidth = 250,
  minHeight = 250,
  imageSrc,
  crop,
  setCrop,
  imgRef,
  onSelectFile,
  onLoad
}) => {
  const { t } = useTranslation();
  return (
    <div className={classes ? classes : ''}>
      {imageSrc ? (
        <div className={Style.cropWrapper}>
          <ReactCrop
            crop={crop}
            minWidth={minWidth}
            minHeight={minHeight}
            onChange={(c) => setCrop(c)}
            aspect={1 / 1}
          >
            <img ref={imgRef} src={imageSrc} onLoad={onLoad} alt="crop image" />
          </ReactCrop>
        </div>
      ) : (
        <label
          className={Style.inputImage}
          title={t('crop-image.upload-a-photo')}
        >
          <input type="file" accept="image/*" onChange={onSelectFile} />
          <Icon id="attach" width={24} height={22} />
          <span>{t('crop-image.upload-a-photo')}</span>
        </label>
      )}
    </div>
  );
};

export default CropImage;

____
Хук для этого компонент

import React, { useCallback, useRef, useState } from 'react';
import { Crop } from 'react-image-crop';

export const useCropImage = (
  width: number,
  height: number,
  minWidth = 250,
  minHeight = 250
) => {
  const imgRef = useRef<HTMLImageElement>(null);
  const [crop, setCrop] = useState<Crop>({
    unit: 'px',
    x: 130,
    y: 36,
    width: width < minWidth ? minWidth : width,
    height: height < minHeight ? minHeight : height
  });
  const [imageSrc, setImageSrc] = useState<any>();
  const [image, setImage] = useState<HTMLImageElement>();
  const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      const reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.addEventListener('load', () => setImageSrc(reader.result));
    }
  };
  const onLoad = useCallback((evt: any) => setImage(evt.target), []);
  const getCroppedImg = () => {
    if (image) {
      const canvas = document.createElement('canvas') as HTMLCanvasElement;
      const scaleX = image.naturalWidth / image.width;
      const scaleY = image.naturalHeight / image.height;
      canvas.width = crop.width;
      canvas.height = crop.height;
      canvas
        .getContext('2d')!
        .drawImage(
          image,
          crop.x * scaleX,
          crop.y * scaleY,
          crop.width * scaleX,
          crop.height * scaleY,
          0,
          0,
          crop.width,
          crop.height
        );
      return canvas
        .toDataURL('image/jpeg')
        .replace('image/png', 'image/octet-stream');
    }
  };
  return {
    crop,
    imgRef,
    onLoad,
    setCrop,
    imageSrc,
    minWidth,
    minHeight,
    setImageSrc,
    onSelectFile,
    getCroppedImg
  };
};

____
Функция которую я вызываю для получения изображения ( и в дальнейшем буду отправлять это изображение на сервер.

function addPhoto() {
    const b64toBlob = (b64Data: string, contentType = '', sliceSize = 512) => {
      const byteCharacters = atob(b64Data);
      const byteArrays = [];

      for (
        let offset = 0;
        offset < byteCharacters.length;
        offset += sliceSize
      ) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
      }

      const blob = new Blob(byteArrays, { type: contentType });
      return blob;
    };

    const contentType = 'image/jpeg';
    const b64Data = window.btoa(addCropPhoto.getCroppedImg()!);

    const blob = b64toBlob(b64Data, contentType);
    const blobUrl = URL.createObjectURL(blob);

    const img = document.createElement('img');
    img.src = blobUrl;
    document.body.appendChild(img);
    console.log(img);
  }

Answer 1

[Надим]

когда перевожу из base64 в blob

А зачем ты это делаешь? Ты в курсе, что base64-изображение можно напрямую вставить в атрибут src и оно (изображение) будет прекрасно отображаться? Пример показа base64-изображения:

<img src="data:image/gif;base64,R0lGODlhDQAMANUAAFRVVtHd74S192aZzHqVuLq0rvf39+zr6bXI4qizwufdz5WhsmSt/5rC+r3Ezm1zeJiSjmum8tzm9bvZ/6bB5a6qpn+t5dvVzZK88+v8/7vg/7DJ4P/99V5gY8zMzObm5ofD/6zQ/3Fua8fX69fm+vDy9OPi4czh/4SXrJLC/////+7u7Wmt/87f9oG2/5Oku5mZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADEALAAAAAANAAwAAAZTwJhwSIwhDsUixZEkWhLNYeQVjYUYBIVKSCKeGIOCymCISTATISsCu5RKW1VAkHKBUBDToRxTcUYNGhsdFR8GW0IqJS0ZDyIrh0kqCwBIVR4eTUEAOw==" />

Comments

[Andrew Morozov]

Мне нужно после того как обрезал, отправить изображение как файл на сервер...

[Надим]

mark1505, ты можешь отправить его как есть текстом, а уже на сервере обработать как надо.

Но если надо тебе отправить обычным способом, то тогда переделай его в Blob при помощи fetch.

Пример переделки:

base64 = 'data:image/gif;base64,R0lGODlhDQAMANUAAFRVVtHd74S192aZzHqVuLq0rvf39+zr6bXI4qizwufdz5WhsmSt/5rC+r3Ezm1zeJiSjmum8tzm9bvZ/6bB5a6qpn+t5dvVzZK88+v8/7vg/7DJ4P/99V5gY8zMzObm5ofD/6zQ/3Fua8fX69fm+vDy9OPi4czh/4SXrJLC/////+7u7Wmt/87f9oG2/5Oku5mZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADEALAAAAAANAAwAAAZTwJhwSIwhDsUixZEkWhLNYeQVjYUYBIVKSCKeGIOCymCISTATISsCu5RKW1VAkHKBUBDToRxTcUYNGhsdFR8GW0IqJS0ZDyIrh0kqCwBIVR4eTUEAOw==';
blob = await (await fetch(base64)).blob();

[Надим]

mark1505, Ну так посмотрите через console.log что вы там НА САМОМ ДЕЛЕ отправляйте:

console.log('Я пытаюсь отправить файл:', file);
console.log('Ссылка для просмотра файла:', URL.createObjectURL(file));

const form = new FormData();
form.append('Photo', file);

// ...