如何以任何脚本语言创建 PNG 文件以供 Web 使用答案

【问题标题】：How to create a PNG file in any scripting language for web use如何以任何脚本语言创建 PNG 文件以供 Web 使用
【发布时间】：2011-12-25 15:29:32
【问题描述】：

让我们说 我想让我的网络用户能够提供半径大小（比如说 5px）然后给他/她发回一个带有圆圈的 png 文件半径。

所以我想我的问题有 2 个部分：

如何创建“图像请求”（使用哪种语言和技术）来获取 PNG 文件，文件在哪里创建以及如何创建
我想有一个 API如何绘制它，但我需要知道从哪里开始是一个不错的起点。

我需要知道从哪里开始，因为这是我尚未探索的领域。

【问题讨论】：

你想全部通过 javascript 吗？还是也使用服务器端脚本？
1.没有“图像请求”之类的东西——用 HTTP 术语来说，你只是在做一个普通的 GET 请求 2.你有没有考虑到特定的服务器端语言？
这是作业吗？如果是这样，请将其标记为这样，人们可能会帮助您
我最好的选择是 ImageMagick (PHP)。还是您需要自己在没有 API 的情况下执行此操作？
html5canvastutorials.com/tutorials/html5-canvas-circles

标签： javascript html css image-processing png

【解决方案1】：

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 大部分是从here盗来的。

还有一个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 This、this 和 @Phrogz 帮助了我。

【讨论】：

对于 PNG 输出调用 c.toDataURL()，然后使用该数据 URL 打开一个新的浏览器窗口，让用户保存它，或在页面上设置图像的 .src。
@Phrogz 谢谢你的想法！