javascript - 如何从图像创建/保存裁剪后的图像？ (将图像转换为base64)

Question

假设我们有两个方形数据

taggedImages: {
  0: {id:0, left:100, top:100, thumbSize:100, type: 'A', seasons: ['All', 'All']},
  1: {id:1, left:200, top:200, thumbSize:100, type: 'B', seasons: ['All', 'All']},
},

我们可以创建/保存两个新的 <Image />组件来自<Image /> ？

给定

1. 每个方 block 的左、上、宽、高
2. 整个图像的宽度和高度

我的方法

1. 不知何故，我将图像缓存到某些路径(file://blahblah、file://blahblah2)
2. 保存时将其转换为 base64。 (我将通过 HTTP 发送多张图像)

任何好的方法或想法都将受到高度赞赏

更新我正在使用 React Native

谢谢

Answer 1

对我来说，听起来您想从现有图像中裁剪两个图像，对吗？ PHP imagecrop就可以了。

你可以这样使用它:

$source = imagecreatefromjpg('/path/to/source.jpg');
$img1 = imagecrop($im, ['x' => 100, 'y' => 100, 'width' => 100, 'height' => 100]);
if ($img1 !== FALSE) {
    imagejpg($img1, '/path/to/square-1.png');
}
$img2 = imagecrop($im, ['x' => 200, 'y' => 200, 'width' => 100, 'height' => 100]);
if ($img2 !== FALSE) {
    imagejpg($img2, '/path/to/square-2.png');
}

如果有多张图片，您可以foreach上传图片。