HTML5/캔버스 - Base64 이미지를 서버에 저장 (현재 이미지 교체)

Question

현재 HTML5 캔버스를 실험 중입니다.

저는 현재 회선을 그릴 수있는 간단한 그림 응용 프로그램을 만들었습니다.

이미지를 base64로 저장할 수 있도록 만들었습니다. var dataUrl = document.getElementById ('your-canvas'). toDataURL();

이미지를 가져 와서 내 서버 (또는 어디서든)에 이미있는 이미지를 바꾸거나 덮어 쓸 수 있는지 궁금합니다.

이 목표는 저장된 이미지를 캔버스의 배경으로 유지하는 것입니다. 그런 다음 누군가가 캔버스에 그려서 저장을 클릭 할 때마다 그림을 배경 이미지로 저장하여 다음 사람이 마지막 사람이 그린 그림을 볼 수 있습니다.

기본적으로 공용 인터넷 화이트 보드입니다.

누군가가 가능하면 알려주고 올바른 방향 (코드 언어, 자습서 등)을 가르쳐 주시겠습니까?

감사합니다.

Answer 1

표시하거나 같은 이미지를 저장할 수 있습니다

$imgData = $_POST['data']; 

$imgData = str_replace(' ','+',$_POST['data']); 
$imgData = preg_replace('/^data:image\/(png|jpg);base64,/','',$imgData); 

header("Content-type: image/png"); 
echo base64_decode($imgData);