时间戳

首页 > 解决方案 > 从 laravel api 中的 react-native 应用程序调整 base64 图像的大小？

javascript - 从 laravel api 中的 react-native 应用程序调整 base64 图像的大小？

问题描述

我正在尝试开发一个应用程序，该应用程序可以从他们的设备相机以 base64 格式发送用户图像输入，并让我的 api 处理、调整大小并以 jpg 格式保存图像，我将react-native image-picker其用作相机处理程序。到目前为止，这是我的代码

// in imageHandlerController.php
public function resizeImage($image) {
    $resizeImage = Image::make($images)->resize(512, 512, function($constraint) {
            $constraint->aspectRatio();
        })->orientate();

    return $resizeImage->response();
}

public function imageHandler(Request $request){
DB::beginTransaction();
    try {
        $constants = Config::get('constants');
        $path = $constants['UPLOAD_PATH'].'/images';
        $random_name = str_random(20);
        $selfie = $request->selfieImage;
        $selfie = str_replace('data:image/png;base64,', '', $selfie);
        $selfie = str_replace(' ', '+', $selfie);
        $selfie_name = 'selfie-'.$random_name.'.png';
        File::put($path.'/partners/'.$selfie_name, $this->resizeImage($selfie));
 }

这是 index.js 上的发布请求

launchCameraSelfie = () => {
    ImagePicker.showImagePicker(response => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else {
        let source = response;
        this.setState({
          selfieImage: source.data
        });
      }
    });
 };

它显示Unable to init from binary data为错误我该怎么做？任何帮助将不胜感激...

标签： javascriptphplaravelreact-native

解决方案

看起来您正在使用该Intervention Image软件包。文档显示确实可以将 base64 字符串转换为Image.

我不清楚为什么data:image/png;base64,要从编码图像中删除初始字符串。我可以想象这部分对于干预起作用是必要的。

我缩短并重写了您的代码。这对我有用：

use Intervention\Image\ImageManagerStatic as Image;

$selfie = $request->selfieImage;

$img = Image::make($selfie);
$img->resize(512, 512, function($constraint) {
    $constraint->aspectRatio();
})->orientate();
$img->save(storage_path('images') . '/test.png');

为了方便测试，可以使用以下 base64 图像（它表示单个黑色像素）：

$selfie = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';

如果你想做一些深入的调试，看看 Intervention 的AbstractDecoder类和它的init()功能。它是识别图像类型的地方，由于某种原因，您的图像被识别为二​​进制。

推荐阅读