javascript - 如何使用react-easy-crop反射(reflect)位置变化(从react-easy-crop到另一个div渲染的实时图像)？

选择图像后，我将其渲染到两个位置，一个位于react-easy-crop(长宽比为4:3)，另一个位于单独的div(960w * 510h)中。 easy-crop.my另一个div也应该移动它的位置。从react-easy-crop监听onchangecrop事件

onCropChange = (crop) => {
    //crop has x and y of translated value in px
    pageObj = `${crop.x * -1}% ${crop.y * -1}%`.toLowerCase();
    //pageObj will have x and y position in percentage.
}

最佳答案

如果我理解正确，则想显示预览图像。如果是这样，您可以使用canvas来处理原始图像并对其进行剪切和重新定位。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Cropper from 'react-easy-crop'

export class App extends Component {
  canvas = {}

  state = {
    image: 'https://www.gravatar.com/avatar/3d721f4c46282afc254f3ea0cd05df30?s=170&d=identicon&r=PG',
    crop: { x: 0, y: 0 },
    zoom: 1,
    aspect: 4 / 3,
    croppedAreaPixels: {}
  }

  onCropChange = crop => {
    this.setState({ crop })
  }

  onCropComplete = (croppedArea, croppedAreaPixels) => {
    console.log(croppedArea, croppedAreaPixels);
    const ctx = this.canvas.getContext('2d');
    const image = document.getElementById('source');

    this.canvas.setAttribute('width', croppedAreaPixels.width);
    this.canvas.setAttribute('height', croppedAreaPixels.height);
    ctx.drawImage(image, croppedAreaPixels.x, croppedAreaPixels.y, croppedAreaPixels.width, croppedAreaPixels.height, 0, 0, croppedAreaPixels.width, croppedAreaPixels.height);
    this.setState({
      croppedAreaPixels
    })
  }

  onZoomChange = zoom => {
    this.setState({ zoom })
  }

  render() {
    const { image, croppedAreaPixels, crop, zoom, aspect } = this.state;
    return (
      <>
        <img id="source" style={{display: 'none'}} src={image} />
        <canvas ref={canvas => this.canvas = canvas} width={croppedAreaPixels.width} height={croppedAreaPixels.height}></canvas>
        <Cropper
          image={image}
          crop={crop}
          zoom={zoom}
          aspect={aspect}
          onCropChange={this.onCropChange}
          onCropComplete={this.onCropComplete}
          onZoomChange={this.onZoomChange}
        />
      </>
    )
  }
}

render(<App />, document.getElementById('root'));

和工作演示:

https://stackblitz.com/edit/react-easy-crop-with-preview

并且使用background-position方法，而不是canvas。

https://stackblitz.com/edit/react-easy-crop-with-preview-with-bg-position

关于javascript - 如何使用react-easy-crop反射(reflect)位置变化(从react-easy-crop到另一个div渲染的实时图像)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56272140/