HTML은 이미지 데이터를 서버에 업로드하고, PHP는 이미지를 받아 저장합니다.

웹에 있는 이미지 데이터나 캔버스에 있는 이미지를 서버에 저장해야 하는 경우가 많습니다. HTML5는 이미 사용 가능한 인터페이스를 제공합니다.

Canvas의 toDataURL 메소드는 캔버스에 있는 캔버스 데이터를 문자열 형식으로 내보낼 수 있습니다. 문자열을 서버에 다시 전송하기만 하면 됩니다.

사진에 img 태그가 있으면 어떻게 해야 하나요?

매우 간단하게, 캔버스는 img 또는 기타 캔버스 데이터를 자신의 캔버스에 그리는 데 사용되는 drawImage 메서드를 제공합니다.

다음으로 클라이언트 코드를 살펴보겠습니다.

var cc = window.document.getElementById("egretCanvas");
var cc2 = document.createElement("canvas");
cc2.setAttribute("width", "320");
cc2.setAttribute("height", "514");
var ctx = cc2.getContext("2d");
ctx.drawImage(cc, 0, 0, 320, 514);

var imgdata: string = cc2["toDataURL"]();

내보낸 문자열에는 "data:image/png;base64" 접두사가 포함되어 있으므로 이 접두사를 제거해야 합니다.

imgdata = imgdata.substring(22); 

그런 다음 문자열을 서버에 전달합니다. 여기서는 PHP 언어를 사용하여 데이터를 수신하고 이미지를 저장하도록 선택합니다.

$imgurl = str_replace(' ', '+', $_REQUEST['image']);

먼저 문자열의 공백을 "+" 기호로 바꿉니다.

$savePath = "../images/123.png";
$image = base64_decode($image);
file_put_contents($savePath,$image);

PHP가 데이터를 가져온 후 이미지로 저장하려면 먼저 base64로 디코딩해야 합니다.

위 내용은 HTML이 이미지 데이터를 서버에 업로드하는 방법과 PHP가 콘텐츠를 포함한 이미지를 받아 저장하는 방법을 소개한 내용입니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되길 바랍니다.