gpt4 book ai didi

javascript - 如何使用任何脚本语言创建 PNG 文件以供网络使用

转载 作者:可可西里 更新时间:2023-11-01 12:52:41 25 4
gpt4 key购买 nike

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

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

  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大部分是从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 帮助了我。

关于javascript - 如何使用任何脚本语言创建 PNG 文件以供网络使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8071091/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com