如何创建一个PNG文件在任何脚本语言的web使用

How to create a PNG file in any scripting language for web use

本文关键字：脚本 任何 语言 使用 web 文件 一个 何创建 创建 PNG      更新时间：2023-09-26

我们就说我想让我的web用户能够设置一个半径大小(设为5px) ，然后向他/她发送一个半径为圆圈的png文件

我想我的问题有两个部分:

  1. 我如何创建一个"图像请求"(哪种语言和技术)来获得PNG文件，在哪里创建的文件以及如何
  2. 我猜有一个API 如何绘制它，但我需要知道哪里是一个开始的好地方。

我需要知道从哪里开始，因为这是一个我还没有探索过的领域

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帮了我。

相关文章：