我想为我的 Web 应用程序实现图像裁剪功能,并发现 React-image-crop 是实现该功能的最佳 npm 包。但是,由于某种原因,ReactCrop 组件提供的预览没有在我的视口上渲染。
这是我一直使用的代码。
import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
function App() {
const [src, setSrc] = useState(null);
const [crop, setCrop] = useState({ aspect: 16 / 9 });
const [image, setImage] = useState(null);
const [output, setOutput] = useState(null);
const selectImage = (file) => {
setSrc(URL.createObjectURL(file));
};
const cropImageNow = () => {
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');
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,
);
// Converting to base64
const base64Image = canvas.toDataURL('image/jpeg');
setOutput(base64Image);
};
return (
<div>
<div>
<input
type="file"
accept="image/*"
onChange={(e) => {
selectImage(e.target.files[0]);
}}
/>
<br />
<br />
<div>
{src && (
<div>
<ReactCrop src={src} onImageLoaded={setImage}
crop={crop} onChange={setCrop} />
<br />
<button onClick={cropImageNow}>Crop</button>
<br />
<br />
</div>
)}
</div>
<div>{output && <img src={output} />}</div>
</div>
</div>
);
}
export default App;
我使用的代码没有任何问题。我能够通过将react-image-crop依赖降级为“^8.6.12”来解决这个问题。最新版本的 npm 包似乎有问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)