P5.js向Azure Custom Vision发送请求

Question

所以，

我使用p5js从画布拍摄图像，我想将其发送到Azure Custom Vision Service（代码如下）。

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 Access Denied”。

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

Answer 1

p5.j​​s get（）方法返回一个具有画布的对象。使用此画布对象而不是像素数组来创建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