Question

Type    Prob_A prob_B  prob_C
Vinyl    .57    .43       0
Wood     .2     .4       .4
Ceramic  .12    .80      .08

我在这里使用import React, { PureComponent } from 'react'; import ReactCrop from 'react-image-crop'; import 'react-image-crop/dist/ReactCrop.css'; class CoachDashboard extends PureComponent { state = { src: null, crop: { unit: '%', width: 50, aspect: 20 / 16, }, }; onSelectFile = e => { if (e.target.files && e.target.files.length > 0) { const reader = new FileReader(); reader.addEventListener('load', () => this.setState({ src: reader.result }) ); reader.readAsDataURL(e.target.files[0]); console.log(e.target.files[0]) } }; onImageLoaded = image => { this.imageRef = image; }; onCropComplete = crop => { this.makeClientCrop(crop); }; onCropChange = (crop, percentCrop) => { this.setState({ crop }); }; async makeClientCrop(crop) { if (this.imageRef && crop.width && crop.height) { const croppedImageUrl = await this.getCroppedImg( this.imageRef, crop, 'newFile.jpeg' ); console.log(croppedImageUrl) this.setState({ croppedImageUrl }); } } getCroppedImg(image, crop, fileName) { 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'); ctx.drawImage( image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width, crop.height ); return new Promise((resolve, reject) => { canvas.toBlob(blob => { if (!blob) { console.error('Canvas is empty'); return; } blob.name = fileName; window.URL.revokeObjectURL(this.fileUrl); this.fileUrl = window.URL.createObjectURL(blob); resolve(this.fileUrl); }, 'image/jpeg'); }); } render() { const { crop, croppedImageUrl, src } = this.state; return ( <div className="App"> <br/><br/><br/><br/><br/> <div> <input type="file" onChange={this.onSelectFile} /> </div> <div style={{ width:'500px' }}> {src && ( <ReactCrop src={src} crop={crop} ruleOfThirds onImageLoaded={this.onImageLoaded} onComplete={this.onCropComplete} onChange={this.onCropChange} width= '200' height= '200' /> )} </div> {croppedImageUrl && ( <img alt="Crop" style={{ height:'200px' }} src={croppedImageUrl} /> )} </div> ); } } export default CoachDashboard;裁剪图像。

我必须将该图像文件发送到后端并存储到数据库。

但是，在react-image-crop函数中，我正在使用onSelectChange()获取实际的图像文件。

但是在裁剪后，当我在e.target.files[0]函数中打印croppedImageUrl时，我得到了一个伪造的图像URL。

如何像在makeClientCrop()中同时进入onSelectChange()函数一样，在裁剪后如何获得实际的图像文件？

Answer 1

您可以执行的操作是将blob文件保存在get.roppedImg函数的canvas.toBlob状态内，然后在保存文件时将其转换为文件。

  getCroppedImg(image, crop, fileName) {
    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');

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

    return new Promise((resolve, reject) => {
      canvas.toBlob(blob => {
        if (!blob) {
          console.error('Canvas is empty');
          return;
        }
        blob.name = fileName;
        window.URL.revokeObjectURL(this.fileUrl);
        this.fileUrl = window.URL.createObjectURL(blob);
        this.setState({blobFile:blob}) // Set blob image inside the state here 
        resolve(this.fileUrl);
      }, 'image/jpeg');
    });
  }

// To save file 
onFileSave(){
const {blobFile} = this.state;
const newImage = new File([blobFile], blobFile.name, { type: blobFile.type });
let fd = new FormData();
fd.append(newImage.name, newImage);
saveImageToServer(fd);
}

如何在裁剪后获取裁剪图像作为反应中的表单数据

1 个答案: