이미지를 그릴 스크립트

Question

나는 내 마우스로 이미지를 그려서 이미지로 저장할 수있는 PHP 스크립트를 찾고있다. 당신이 알고 있다면 어떤 도움을주십시오.

Answer 1

. 당신의 saveImage.php 스크립트에서

$('#btn').bind("click", function(evt) { 
    $.post('saveImage.php', {image : canvas.toDataURL('image/jpeg')}); 
}); 

:

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    pos = false; 

ctx.strokeStyle = "red"; 

$(canvas).bind("mousedown", function(evt) { 
    pos = {x: evt.layerX, y: evt.layerY}; 
    ctx.beginPath(); 
    ctx.moveTo(pos.x, pos.y); 
}); 

$(canvas).bind("mousemove", function(evt) { 
    if(!pos) return; // You may not want to do this on every mousemove. 
    pos = {x: evt.layerX, y: evt.layerY}; 
    ctx.lineTo(pos.x, pos.y); 
    ctx.stroke(); 
}); 

$(canvas).bind("mouseup", function(evt) { 
    if(!pos) return; 
    ctx.closePath(); 
    pos = false; 
}); 

은 또한 당신의 PHP 스크립트에 이미지 데이터를 전송하는 버튼을 추가 : 당신은 예를 들어, 원하는대로 물론이 캔은 고급 또는 단순 서버에서 데이터를 디코딩하여 파일에 기록하십시오.

$imgData = $_POST["image"]; // Probably a good idea to sanitize the input! 
$imgData = str_replace(" ", "+", $imgData); 
$imgData = substr($imgData, strpos($imgData, ",")); 

$file = fopen('myImage.jpg', 'wb'); 
fwrite($file, base64_decode($imgData)); 
fclose($file); 

트릭을해야합니다 :-) 저는 여기 JS 비트에 대해 jQuery를 사용하고 있습니다. 물론 필요하지 않습니다.

Answer 2

PHP는 서버 측에서 실행되는 반면, 마우스와의 상호 작용은 클라이언트 측에서 수행됩니다. JavaScript 또는 Flash와 같은 브라우저 내 기술을 사용하여 마우스 움직임을 캡처하고 비트 맵 데이터를 먼저 생성해야합니다. 당신이 당신이 그릴 수있는 자바 스크립트 코드 조각을 확인

:-) 몇 바퀴를 개혁 같은 느낌 할 경우