Как canvas загрузить на сервер как изображение?

Question

[Andrew Morozov]

Я использовал плагин react-image-crop, после обрезание изображения я получаю base64 строку, как мне это всё собрать что бы загрузить на сервер картинку, а не base64.

Получаю сейчас что-то типа

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAUABQAMBIgACEQEDEQH/xAAdAAEAAAcBAQAAAAAAAAAAAAAAAwQFBgcICQIB/8QASBAAAQMDAwIDBQUFBgMFCQA.......

Сервер хочет принимать изображение, я отправляю ему строку base64, получаю ошибку, нужно как-то решить это...

Answer 1

[Alexandroppolus]

у канвы есть метод toBlob, используй его для своих корыстных целей

Comments

[Andrew Morozov]

Можешь пожалуйста подсказать как это можно сделать в моем случае, а то в документации пример как скачать изображение, а мне нужно загрузить его на сервер...

Вот у меня компонент ( и кастомный хук useCroppedImage ) который обрезает изображение, и в функции "getCroppedImg" возвращает обрезанное изображение как base64....

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

[Alexandroppolus]

mark1505, после того, как у тебя на руках оказался блоб, его можно передать напрямую в fetch, либо собрать FormData и его толкнуть снова через fetch

ссылки:
https://learn.javascript.ru/fetch#otpravka-izobraz...
https://learn.javascript.ru/formdata