在客户端使用nodeca/pica和React调整图像大小的步骤如下:
npm install nodeca/pica
或
yarn add nodeca/pica
import pica from 'nodeca/pica';
const resizeImage = (file, width, height) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
pica().resize(img, canvas)
.then(result => {
canvas.toBlob(blob => {
resolve(blob);
}, 'image/jpeg');
})
.catch(error => {
reject(error);
});
};
img.onerror = error => {
reject(error);
};
});
};
const handleImageChange = async (event) => {
const file = event.target.files[0];
const resizedImage = await resizeImage(file, 300, 200);
// 处理调整后的图像,例如上传到服务器或显示在页面上
};
在上面的例子中,调整后的图像将被存储在resizedImage
变量中,你可以根据需要进行进一步的处理,例如上传到服务器或在页面上显示。
这样,你就可以在客户端使用nodeca/pica和React来调整图像大小了。请注意,nodeca/pica是一个基于Promise的图像处理库,它可以在浏览器中高效地进行图像大小调整。在上述代码中,我们使用了HTML5的Canvas API来创建一个画布,并使用pica库来将图像调整到指定的宽度和高度。
领取专属 10元无门槛券
手把手带您无忧上云