P5.js 向 Azure 自定义视觉发送请求

Question

所以，

我使用 p5js 从 canvas 中获取图像，我想将其发送到 Azure 自定义视觉服务（代码如下）。

p5 图像是否与普通 js 图像相同（例如当您从视频中截取图像时）？

我的问题是当我以 json 形式发送表单时，例如：

let c = get(0,0,250,250);
var http = new XMLHttpRequest();
http.open('POST', prediction_URL, true);
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        console.log(http.responseText);
    }
} 
var objurl = window.URL.createObjectURL(new Blob([c]));
http.send({
 url: prediction_URL,
 encoding: null,
 json: false,
headers: {
  'Content-Type': 'application/octet-stream',
  'Prediction-Key': 'xxxxxxxxxxxxx'
},
body: objurl
});

但它给了我“401 访问被拒绝”。

甚至可以通过 http 请求发送使用 p5 创建的图像吗？

Answer 1

p5.js get() 方法 returns 具有 canvas 的对象。使用此 canvas 对象而不是像素数组来创建 blob 对象。下面的代码将创建 blob，您只需要编写代码来存储它，然后将其放入您的调用中。

let c = get(0,0,250,250);
c.canvas.toBlob(function(blob) {// get content as blob
    console.log("callback blob: " + blob);
    // store the blob off so you can use it in your call
}, "image/jpeg", 0.75); // use the image type and quality parameter you need

参见：HTMLCanvasElement/toBlob

P5.js 向 Azure 自定义视觉发送请求

P5.js send request to Azure Custom Vision

javascript

azure

computer-vision

p5.js