Почему получается битое изображение?

Question

[QnaTwitt]

Сделал компонент для обрезания фото, при помощи плагина react-crop-image, вроде бы всё работать должно, но приходит битое изображение, подскажите пожалуйста в чём причина.
(Потом это изображение нужно будет отправлять на сервер как файл)

Вот код
codesandbox

Answer 1

[Alexandroppolus]

Ты там творишь какую-то лютую дичь.
У канвы есть метод toBlob. Кинул картинку на канву, обрезал, получил блоб и отправил на бэк.
Какой, к черту, Uint8Array???

Comments

[QnaTwitt]

Мне на бэк нужно отправить файл, API принимает только файлы

[Alexandroppolus]

QnaTwitt, это понятно. Я говорю о том, что вместо canvas.toDataURL и последующего перекладывания байтов можно просто воспользоваться canvas.toBlob и не морочить голову

[QnaTwitt]

Alexandroppolus, А как потом из этого файл собрать, что бы на сервер отправить?

[Alexandroppolus]

QnaTwitt, блоб - это и есть тот самый "файл", который надо отправить.
https://learn.javascript.ru/blob
https://learn.javascript.ru/file

https://learn.javascript.ru/formdata

[QnaTwitt]

Alexandroppolus, Что-то я всё равно не пойму, как мне из этого собрать blob через toBlob(), что бы дальше с ним работать...

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

[Alexandroppolus]

QnaTwitt, не надо ничего "понимать". Надо просто прочитать буквы по тем ссылкам, которые я накидал.

Вот в первой же есть пример - https://learn.javascript.ru/blob#izobrazhenie-v-blob

потом блоб можно запихнуть прямо в fetch, либо добавить в FormData, который уже передать в fetch. У тебя наверно есть документация по твоему API? там должно быть расписано, что требуется - форма или файл.

[QnaTwitt]

Alexandroppolus,
Нефига так и не понял как это сделать)
https://codesandbox.io/s/vibrant-hawking-h11rrp?fi...

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

export const useCropImage = (
  width: number,
  height: number,
  minWidth = 250,
  minHeight = 250
) => {
  const imgRef = useRef<any>(null);
  const [crop, setCrop] = useState<Crop>({
    unit: 'px',
    x: 130,
    y: 36,
    width: width < minWidth ? minWidth : width,
    height: height < minHeight ? minHeight : height
  });
  const [image, setImage] = useState<any>();
  const [imageSrc, setImageSrc] = useState<any>();
  const [nameFile, setNameFile] = useState('');

  const onSelectFile = (evt: ChangeEvent<HTMLInputElement>) => {
    if (evt.target.files && evt.target.files.length > 0) {
      const reader = new FileReader();
      reader.readAsDataURL(evt.target.files[0]);
      setNameFile(evt.target.files[0].name.replace(' ', ''));
      reader.addEventListener('load', () => setImageSrc(reader.result));
    }
  };

  const onLoad = useCallback((evt: any) => setImage(evt.target), []);

  const cropImageNow = () => {
    if (image) {
      const canvas = document.createElement('canvas');
      const scaleX = image.naturalWidth / image.width;
      const scaleY = image.naturalHeight / image.height;
      canvas.width = crop.width;
      canvas.height = crop.height;
      const ctx = canvas.getContext('2d');

      if (ctx) {
        const pixelRatio = window.devicePixelRatio;
        canvas.width = crop.width * pixelRatio;
        canvas.height = crop.height * pixelRatio;
        ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
        ctx.imageSmoothingQuality = 'high';

        ctx.drawImage(
          image,
          crop.x * scaleX,
          crop.y * scaleY,
          crop.width * scaleX,
          crop.height * scaleY,
          0,
          0,
          crop.width,
          crop.height
        );
      }

      canvas.toBlob((blob) => {
        const form = new FormData();
        form.append('photo', blob);
        console.log(form);
      })
      // const base64Image = canvas.toDataURL('image/jpeg');
      // return base64Image;
      // return dataURLtoFile(base64Image, nameFile);
    }
  };

  return {
    crop,
    imgRef,
    onLoad,
    setCrop,
    imageSrc,
    nameFile,
    minWidth,
    minHeight,
    setImageSrc,
    cropImageNow,
    onSelectFile
  };
};

[QnaTwitt]

Alexandroppolus, Даже если так сделаю

canvas.toBlob((blob) => {
        console.log(blob);
        const formData = new FormData();
        formData.append('image', blob, 'image.png');
        console.log(formData);
      }, 'image/png');

получаю не то.....

пустой объект FormData...

[Alexandroppolus]

QnaTwitt, я так смотрю, упорствуешь в своей ереси...

formData.append('image', blob, 'image.png');

это правильно, название надо не забыть, блоб-то безымянный.

пустой объект FormData...

как определяешь что пустой? console.log тебя обманывает - показывает пустое значение
для консоли надо так: console.log([... formData.entries()])

вот -
https://codesandbox.io/s/gracious-leaf-yldrex?file...

или просто попробуй отправить его на бэк, посмотри в дебаггере (вкладка "Network"), что ушло.

[QnaTwitt]

Alexandroppolus, У меня отправляется вот так на бэк....

либо