p5js:通过HTTP POST发送静止图像
p5.js是一个基于JavaScript的创意编程库，它可以帮助开发者在网页上创建交互式的图形和动画。通过p5.js，可以使用HTTP POST方法发送静止图像。
HTTP POST是一种用于向服务器发送数据的HTTP请求方法。它可以将数据作为请求的主体发送给服务器，而不是作为URL的一部分。通过使用HTTP POST，可以将静止图像发送给服务器进行处理或存储。
以下是p5.js通过HTTP POST发送静止图像的步骤：
- 创建一个HTML页面，并引入p5.js库。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>- 在同级目录下创建一个名为sketch.js的JavaScript文件，并编写p5.js代码。
function setup() {
// 创建画布
createCanvas(400, 400);
// 加载静止图像
loadImage('image.jpg', function(img) {
// 将图像绘制到画布上
image(img, 0, 0);
// 将图像转换为Base64编码的字符串
var base64 = img.canvas.toDataURL();
// 发送HTTP POST请求
var data = {
image: base64
};
httpPost('https://example.com/upload', 'json', data, function(response) {
console.log(response);
});
});
}在上述代码中，首先使用createCanvas()函数创建一个400x400的画布。然后使用loadImage()函数加载静止图像，并在回调函数中将图像绘制到画布上。接下来，使用toDataURL()函数将图像转换为Base64编码的字符串。最后，使用httpPost()函数发送HTTP POST请求，将图像数据作为JSON格式的数据发送给服务器。
请注意，上述代码中的URL（https://example.com/upload）是一个示例URL，你需要将其替换为实际的服务器端接口地址。
推荐的腾讯云相关产品：腾讯云对象存储（COS）。 腾讯云对象存储（COS）是一种安全、低成本、高可靠的云端存储服务，适用于存储大量非结构化数据，如图像、音视频文件等。你可以使用腾讯云COS提供的API来实现静止图像的上传和存储。
腾讯云COS产品介绍链接地址：https://cloud.tencent.com/product/cos
相关·内容
1回答
p5js图像阵列
javascript、p5.js
每次点击鼠标时，我都想在画布上画一个随机图像。
let img = []
function preload(){
for (let i = 0; i < 3; i++) {
img[i] = loadImage('img/img' + i + '.png')
}
}
function setup() {
createCanvas(windowWidth, windowHeight)
background(200, 255,255 )
let img = random('img')
}
浏览 0提问于2018-07-08得票数 0
1回答
Visual代码中的p5.js : sketch.js未“执行”
javascript、visual-studio-code、p5.js
如果这个问题类似于几个类似的问题，请耐心等待，但我似乎不适应我的问题的答案，例如。
下面的sketch.js示例在中工作
function setup() {
createCanvas(700, 700);
noFill();
console.log("Hello World!");
}
function draw() {
ellipse(mouseX, mouseY, 40, 80);
}
我想使用代码继续使用p5.js。
下面的index.html是由示例代码的指导人员提供的：
<!DOCTYPE html>
<html>
&l
浏览 10提问于2022-06-11得票数 0
回答已采纳
1回答
无法显示p5 JavaScript背景图像
javascript、p5.js
我正在尝试用JavaScript制作一个p5游戏。我需要一个图像作为背景，但它没有显示。我已经为图像设置了绝对路径，并使用vs代码肝服务器运行服务器。
sketch.js
var backgroungImg;
function preload() {
backgroundImg = loadImage(
"C:/full path/img/extra/map1.png"
);
}
function setup() {
createCanvas(1000, 600);
background(backgroundImg);
}
function dra
浏览 3提问于2020-09-13得票数 1
回答已采纳
1回答
我可以在p5.js画布上使用Seriously.js吗？
javascript、canvas、p5.js
我试图使用带有画布的作为它的源(相对于图像)，特别是p5.js画布。在它的自述中，Seriously.js状态
接受来自不同来源的图像输入:视频、图像、画布、阵列、摄像头、Three.js。
然而，我还没有找到一个画布作为工作的来源。
我尝试过的是:我使用并对其进行了修改，使其使用画布而不是图像(并去掉了require.js )。当我从图像切换到p5.js画布时，它就不再工作了。下面是HTML：
<!DOCTYPE html>
<html>
<head>
<title>Seriously.js Directional Motion B
浏览 2提问于2017-09-09得票数 1
回答已采纳
1回答
加载未显示窗体的上载图像
javascript、html、forms、image、p5.js
用户用表单上传图像。这些图像都应该显示在画布上。多幅图像中只有一幅显示。也许图像没有正确加载？
html：
let value = 0;
var images = [];
function setup() {
createCanvas(320, 270);
background(0);
const form = document.querySelector('form');
frameRate(2);
form.addEventListener('submit', e => {
e.p
浏览 1提问于2019-03-01得票数 1
回答已采纳
2回答
p5.js clear()函数在移动设备和某些浏览器中无法正常工作
javascript、html5-canvas、p5.js
我使用的HTML非常简单，如下所示：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="
浏览 1提问于2018-07-06得票数 1
0回答
在不调用函数的情况下，这段JavaScript代码是如何工作的？
javascript、p5.js
这是代码的代码。难道画布不应该只在我用setup()；调用函数时才创建吗？
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
浏览 6提问于2017-12-09得票数 2
回答已采纳
3回答
有没有可能在javascript (p5js)上做一个透明的背景色？
javascript、css、canvas、transparent、p5.js
你好，我想知道是否有可能使画布的背景看起来透明(没有颜色)。下面的代码片段显示了我试图解释的一个示例。如果你有任何建议，请让我知道
function setup() {
createCanvas(400, 400);
}
function draw() {
/* How to make a transparent color????? */
background(220);
rect(100,100,100,200);
}
html, body {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
浏览 4提问于2018-04-09得票数 1
1回答
如何使用p5库阻止矩形移出Javascript中的画布
javascript、html
这是我的Javascript：
var x;
var y;
var ymod = 0;
function setup() {
createCanvas(600, 600);
x = 10;
y = 12;
}
function draw() {
background(48, 48, 48);
noStroke();
fill(255, 255, 255);
rect(x, y, 10, 30);
y = y + ymod;
}
function keyPressed() {
if (keyCode === UP_ARROW) {
ymod = -1
浏览 0提问于2017-06-17得票数 0
回答已采纳
1回答
如何在实例模式下使用p5.js声音
javascript、audio、instance、p5.js
我试图在同一个页面上创建一个包含多个p5画布的网站，因此经过大量的研究，我得出的结论是，最合适的方法是在p5上使用实例模式。我花了一整天的时间来理解实例模式，我甚至在网上找到了一个转换器，它可以为我转换它，但我试图用它来检查错误。问题是，我找不到一种方法来使用声音在我的草图使用实例模式。我所拥有的代码要复杂得多，但即使只是尝试基本的代码，它仍然无法工作。
var s = function(p) {
let song;
p.preload = function() {
p.song = load('thunder.mp3')
}
p.setup
浏览 5提问于2020-12-06得票数 0
回答已采纳
1回答
在p5.js中绘制三角形时"TypeError: c1.level是未定义的“
javascript、html、p5.js
我一直试图在p5.js中重新创建一个在屏幕上绘制三角形的程序，很像这样：
它是基于Mike的 on codepen.io开发的，但是我在经历它的过程中改变了一些东西。当我第一次尝试在我自己的电脑上直接从他的项目中运行代码时，它根本不起作用，所以我花了一个早上的时间编辑它，使它成为这个新版本，如下所示。
var img;
var xPos = [];
var yPos = [];
var sampleRate = 8;
var shapePoints = 3;
var frames = 0;
function preload() {
img = loadImage(&#
浏览 1提问于2016-07-17得票数 2
回答已采纳
1回答
珀林噪声不工作(p5js)
javascript、html、p5.js、perlin-noise
我正在使用P5.js和Perlin noise()函数来尝试使用Perlin噪声生成的x和y坐标绘制一个圆。我没有收到任何错误消息，但画布上没有绘制任何内容。我做错了什么？
let width;
let height;
function setup() {
createCanvas(windowWidth, windowHeight);
width = windowWidth;
height = windowHeight;
}
var Circle = function () {
this.x = width / 2;
this.y = height
浏览 0提问于2018-06-05得票数 0
1回答
p5js:通过HTTP POST发送静止图像
image、http、post、format、p5.js
我正在使用一个简单的p5.js程序来获取一个网络摄像头流，并每隔几秒钟在屏幕上显示一张静止图像。 let capture;
function setup() {
createCanvas(320, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
}
function draw() {
if(frameCount % 120 == 0)
{image(capture, 0, 0, 320, 240);}
} 然后，我想
浏览 27提问于2020-06-25得票数 1
1回答
生命中的p5，未定义的TypeError:无法读取未定义的属性“className”
javascript、iife、p5.js
我试图在生活中运行p5，但是得到了这个错误：
未定义的TypeError:无法读取未定义的属性“className”
没有生命它就不会出现。
sketch.js
var sketch = (function(p5) {
setup = function() {
p5.createCanvas(p5.windowWidth, p5.windowHeight);
p5.background(0);
};
}(new p5(sketch, "canvas")));
index.html
<head>
<meta http-equiv=
浏览 1提问于2017-04-27得票数 1
2回答
屏幕底部使用p5.js的小白线
javascript、html、css、p5.js
我对p5.js很陌生，我只是尝试创建一个全屏画布，但是我在屏幕底部得到了一条小白线，我不知道为什么
function setup() {
createCanvas(windowWidth, windowHeight);
//background(0);
}
function draw() {
background("#222");
ellipse(windowWidth / 2, windowHeight / 2, 100, 100);
fill("#07C");
noStroke();
}
<!DOC
浏览 26提问于2022-02-17得票数 0
回答已采纳
1回答
Uncaught :canvas1.place不是p5.js中的函数
javascript、jquery、html、p5.js
我试图用p5.js和javascript来制作程序。但我在p5.dom.js中遇到了一个问题，并出现了错误，比如：
“秘密TypeError: function.位置不是一个函数”
我几乎消耗了一天：
我正要使用p5.js创建另一个js文件。
这是我的密码！
main.html
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js">&
浏览 10提问于2017-05-15得票数 0
2回答
无法使用..\路径语法从atom中的父目录访问p5.js库
javascript、html、atom-editor、p5.js
最近，我在Atom ide中使用p5.js，并尝试使用从其网站下载的本地p5.js库。作为一个最小的例子，我尝试使用atom联机web服务器包( atom -live plus)并引用位于atom项目父文件夹中的p5.js库来执行一个基本的sketch.js文件。这样，我只需要一个p5.js库的副本，我所有的p5.js项目都可以引用同一个库，而不需要重复。问题:我无法执行代码，因为当我使用'..‘在.html文件中指定p5.js库位置时出现了问题语法。示例：
<script src="..\libraries\p5.js"></script>.
浏览 5提问于2020-12-13得票数 1
回答已采纳
1回答
P5拖放不加载
drag-and-drop、html5-canvas、p5.js
我一直试图使用下面的P5引用中解释的拖放方法来实现load函数。但是，在将图像拖到画布的第一个实例中，图像将不会加载。第二次尝试将很好地加载图像。这发生在我试图加载到画布上的每一张“新”图像中。
当注释掉“.hide”时，您可以看到图像数据在第一次尝试时已成功加载。我对如何纠正这一问题感到有点困惑。
谢谢任何能为我指明正确方向的人。
index.html
<!DOCTYPE html>
<html>
<head>
<script src="p5.js"></script>
<
浏览 0提问于2018-03-23得票数 1
回答已采纳
3回答
如何调整画布的大小以适应浏览器窗口？
javascript、canvas、html5-canvas
)当有人调整浏览器窗口大小时，我正在尝试调整画布的大小。到目前为止，我的代码如下：
html：
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js">
</script>
<script language="javascript" src="libraries/p
浏览 13提问于2017-05-19得票数 5
回答已采纳
1回答
P5.js中的箭头线条画笔
javascript、processing、drawing、p5.js
我目前正在p5.js中创建一个画笔 function setup() {
createCanvas(400, 400);
background(255)
}
function draw() {
if(mouseIsPressed){
stroke(255);
fill(0);
strokeWeight(30);
triangle(mouseX, mouseY, pmouseX, pmouseY);
stroke(0);
strokeWeight(25);
triangle(mouseX,
浏览 28提问于2021-05-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
