Как создать файл PNG на любом языке сценариев для веб-использования - PullRequest
Новая
       17

Как создать файл PNG на любом языке сценариев для веб-использования

3 голосов
/ 10 ноября 2011

давайте просто скажем Я хочу дать своему веб-пользователю возможность задать размер радиуса (скажем, 5px) , а затем отправить его обратно в файл png с кружком в этом радиусе.

поэтому я думаю, что мой вопрос состоит из 2 разделов:

  1. Как мне создать «запрос изображения» (какой язык и технологии) дляполучить файл PNG, где этот файл создан и как
  2. Я предполагаю, что есть API , как его нарисовать , но мне нужно знать, с чего начать.

Мне нужно знать, с чего начать, потому что это поле, которое я еще не исследовал.

1 Ответ

4 голосов
/ 10 ноября 2011

Очень простой пример с PHP: 

<?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 По большей части украдено у здесь .

И небольшой пример с JavaScript и Canvas: 

<!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 Это , , это и @Phrogz помогли мне.

...