2011-11-09 3 views
3

방금 ​​내 웹 사용자에게 반경 크기 (예 : 5px) 을 제공 한 다음 png를 보내 주겠다고 제안합니다. 이 반경에 원이있는 파일.웹용 스크립팅 언어로 PNG 파일을 만드는 방법

그래서 난 내 질문에이 개 부분이 추측 : PNG 파일을 얻기 위해 내가 "이미지 요청"을 만들 수있는 방법

  1. (어떤 언어와 기술을), 어디 파일을 생성하는 방법입니다
  2. 나는 API가 인데 그걸 어떻게 그릴 것인가?하지만 시작하기 좋은 곳이 어디인지 알아야합니다.

이것은 내가 아직 탐구하지 않은 분야이기 때문에 시작할 곳을 알아야합니다. PHP

+2

자바 스크립트로 모두 하시겠습니까? 또는 Serversides 스크립트를 사용 하시겠습니까? – Birey

+0

1. "이미지 요청"과 같은 것은 없습니다 - HTTP 용어로는 일반적인 GET 요청을하고있을뿐입니다 2. 특정 서버 측 언어를 염두에두고 있습니까? –

+0

이 숙제가 있습니까? 그렇다면 태그를 달아 사람들이 당신을 도울 수 있습니다. – meouw

답변

4

아주 간단한 예 :

<?php 
// Create a blank image. 
$image = imagecreatetruecolor(400, 300); 
// Select the background color. 
$bg = imagecolorallocate($image, 0, 0, 0); 
// Fill the background with the color selected above. 
imagefill($image, 0, 0, $bg); 
// Choose a color for the ellipse. 
$col_ellipse = imagecolorallocate($image, 255, 255, 255); 
// Draw the ellipse. 
imageellipse($image, 200, 150, $_GET['w'], $_GET['w'], $col_ellipse); 
// Output the image. 
header("Content-type: image/png"); 
imagepng($image); 
?> 

당신은 매개 변수 w로 스크립트를 호출해야합니다. 예 : image.php?w=50 주로 도난당했습니다. here

그리고 JavaScriptCanvas와 약간의 예 :

<!DOCTYPE html> 
<html> 
<body> 
canvas: 
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 

    var c=document.getElementById("myCanvas"); 
    var cxt=c.getContext("2d"); 


    function getParameterByName(name){ 
      name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
      var regexS = "[\\?&]" + name + "=([^&#]*)"; 
      var regex = new RegExp(regexS); 
      var results = regex.exec(window.location.href); 
      if(results == null) 
      return ""; 
      else 
      return decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 

    cxt.fillStyle="#FF0000"; 
    cxt.beginPath(); 
    cxt.arc(50,50,getParameterByName("w"),0,Math.PI*2,true); 
    cxt.closePath(); 
    cxt.fill(); 
    document.write('png:<img src="'+c.toDataURL("image/png")+'"/>'); 
</script> 

</body> 
</html> 

당신은 여전히 ​​매개 변수 w로 스크립트를 호출했다. 예 : image.html?w=50 This, this 및 @Phrogz가 도움이되었습니다.

+0

PNG 출력의 경우'c.toDataURL()'을 호출 한 다음 해당 데이터 URL로 새 브라우저 창을 열거 나 저장하거나 페이지에 이미지의 .src를 설정하십시오. – Phrogz

+0

@Phrogz 아이디어에 감사드립니다! – Robin

관련 문제