[javascript] base64 데이터 문자열에서 PNG 이미지 서버 측을 저장하는 방법

캔버스 그림을 PNG 이미지로 변환하기 위해 Nihilogic의 “Canvas2Image”JavaScript 도구를 사용하고 있습니다. 내가 지금 필요한 것은 PHP를 사용하여이 도구가 생성하는 base64 문자열을 서버의 실제 PNG 파일로 바꾸는 것입니다.

요컨대, 현재하고있는 일은 Canvas2Image를 사용하여 클라이언트 측에서 파일을 생성 한 다음 base64로 인코딩 된 데이터를 검색하여 AJAX를 사용하여 서버로 보내는 것입니다.

// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);   

image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);

var url = 'hidden.php',
data = $('#canvasimage').attr('src');

$.ajax({ 
    type: "POST", 
    url: url,
    dataType: 'text',
    data: {
        base64data : data
    }
});

이 시점에서 “hidden.php”는 data : image / png; base64, iVBORw0KGgoAAAANSUhEUgAABE … 와 같은 데이터 블록을 받습니다.

이 시점부터 나는 꽤 많이 혼란에 빠졌다. 읽은 내용에서 PHP의 imagecreatefromstring 함수 를 사용해야한다고 생각 하지만 실제로 base64로 인코딩 된 문자열에서 실제 PNG 이미지를 만들어 서버에 저장하는 방법을 모르겠습니다. 도와주세요!



답변

해당 문자열에서 base64 이미지 데이터를 추출하고 디코딩 한 다음 디스크에 저장할 수 있습니다. 이미 png이므로 GD가 필요하지 않습니다.

$data = 'data:image/png;base64,AAAFBfj42Pj4';

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);

file_put_contents('/tmp/image.png', $data);

그리고 하나의 라이너로 :

$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));

오류를 추출, 디코딩 및 확인하는 효율적인 방법은 다음과 같습니다.

if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {
    $data = substr($data, strpos($data, ',') + 1);
    $type = strtolower($type[1]); // jpg, png, gif

    if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
        throw new \Exception('invalid image type');
    }

    $data = base64_decode($data);

    if ($data === false) {
        throw new \Exception('base64_decode failed');
    }
} else {
    throw new \Exception('did not match data URI with image data');
}

file_put_contents("img.{$type}", $data);


답변

이 시도:

file_put_contents('img.png', base64_decode($base64string));

file_put_contents 문서


답변

str_replace(' ', '+', $img);이 작업을 수행하려면 공백을 더하기 기호로 바꿔야 했습니다.

전체 코드는 다음과 같습니다

$img = $_POST['img']; // Your data 'data:image/png;base64,AAAFBfj42Pj4';
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents('/tmp/image.png', $data);

희망이 도움이됩니다.


답변

논의 된 주제는 RFC 2397- “데이터”URL 체계 ( https://tools.ietf.org/html/rfc2397 )에 설명되어 있습니다.

이 PHP는 이러한 데이터를 처리하는 기본 방법을 가지고 있습니다- “data : stream wrapper”( http://php.net/manual/en/wrappers.data.php )

따라서 PHP 스트림으로 데이터를 쉽게 조작 할 수 있습니다.

$data = 'data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';

$source = fopen($data, 'r');
$destination = fopen('image.gif', 'w');

stream_copy_to_stream($source, $destination);

fclose($source);
fclose($destination);


답변

위의 해결책은 jpeg 파일 인 이미지에 달려 있습니다. 내가 사용한 일반적인 솔루션

$img = $_POST['image'];
$img = substr(explode(";",$img)[1], 7);
file_put_contents('img.png', base64_decode($img));


답변

@ dre010 아이디어를 취하여 PNG, JPG, JPEG 또는 GIF와 같은 모든 이미지 유형에서 작동하는 다른 기능으로 확장했으며 파일 이름에 고유 한 이름을 지정합니다.

이미지 데이터와 이미지 유형을 분리하는 기능

function base64ToImage($imageData){
    $data = 'data:image/png;base64,AAAFBfj42Pj4';
    list($type, $imageData) = explode(';', $imageData);
    list(,$extension) = explode('/',$type);
    list(,$imageData)      = explode(',', $imageData);
    $fileName = uniqid().'.'.$extension;
    $imageData = base64_decode($imageData);
    file_put_contents($fileName, $imageData);
}


답변

총 관심사 :

$data = 'data:image/png;base64,AAAFBfj42Pj4';

// Extract base64 file for standard data
$fileBin = file_get_contents($data);
$mimeType = mime_content_type($data);

// Check allowed mime type
if ('image/png'==$mimeType) {
    file_put_contents('name.png', $fileBin);
}

http://php.net/manual/en/wrappers.data.php

http://php.net/manual/en/function.mime-content-type.php