Javascript 在p5js画布上显示来自localhost的图像时出错

问题：

我正在学习p5.js，我正在学习YouTube频道的编码教程。一切都很好，直到我不得不调用图像对象上的库函数。问题是我在一个对象p中实例化了这个库，并且通过p对象使用它的变量。我不知道为什么它不能识别loadPixels（）函数。在本教程中，该函数运行良好

错误消息：

---

我尝试了很多东西，几乎放弃了，但最后我不得不对代码做了一点修改，这对我来说很有效。虽然我得到的是Alice在评论中建议的base64 url，我将其转换为Uint8ClampedArray。现在，如果任何人想要一个完整的图像或图像的所有像素，那么他们可以遵循以下链接：-。我希望这将有助于任何人谁想使离线webcanvas的基础上的应用程序，不想涉足CORS

var fileSelector = document.createElement('input');
                fileSelector.setAttribute('type', 'file');
                fileSelector.setAttribute('accept', 'image/gif, image/jpeg, image/png');

                fileSelector.click();
                fileSelector.onchange = function(e) {
                    img = new Image();
                    var file = e.target.files[0];

                    var reader = new FileReader();
                    reader.onloadend = function() {
                         img.src = reader.result;
                    }
                    reader.readAsDataURL(file);


                    var newWindow = window.open("", "_blank", "height=56,width=56,status=yes,toolbar=no,menubar=no,location=no");  
                    
                    newWindow.document.write("<canvas id='imagePlaceholder'>Canvas not supported!</canvas>");
                    var canvas = newWindow.document.getElementById("imagePlaceholder");
                    var ctx = canvas.getContext("2d");

                    ctx.drawImage(img, 0, 0);
                    // console.log(ctx.getImageData(0, 0, 56, 56).data);
                    var dest = ctx.getImageData(0, 0, img.width, img.height).data;
                    console.log(dest);
                    newWindow.close();
                }

var fileSelector=document.createElement（'input'）；
setAttribute（'type'，'file'）；
fileSelector.setAttribute（'accept'，'image/gif，image/jpeg，image/png'）；
fileSelector.click（）；
fileSelector.onchange=函数（e）{
img=新图像（）；
var file=e.target.files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
img.src=reader.result；
}
reader.readAsDataURL（文件）；
var newWindow=window.open（“，”_blank“，”高度=56，宽度=56，状态=yes，工具栏=no，菜单栏=no，位置=no”）；
newWindow.document.write（“不支持画布！”）；
var canvas=newWindow.document.getElementById（“imagePlaceholder”）；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0,0）；
//log（ctx.getImageData（0,0,56,56）.data）；
var dest=ctx.getImageData（0，0，img.width，img.height）；
控制台日志（dest）；
newWindow.close（）；
}

这里一个明显的问题是，您正在使用内置的

Image（）

构造函数，它创建一个HTMLImageTag（请参阅），而不是创建一个p5js

p5.Image

对象（请参阅）。然而，还有其他几个问题。在p5js中，您需要在preload函数中加载图像，以确保它们在开始绘图时可用（这是一个异步操作）。使用内置的image函数，您可以更轻松地在p5js中绘制图像。如果要使用像素阵列，需要了解这些阵列的结构。它们不存储颜色对象，它们为每个颜色通道存储4个单独的数字（红色、绿色、蓝色和alpha）。因此数组中的索引不是

（x+y*宽度）

，而是

（（x+y*宽度）*4+通道）

，其中

通道

是从0到3的数字。您还需要考虑画布的像素密度可能大于1，而图像的像素密度为1。我强烈建议您阅读所有的文档

让草图=函数（p）{
让img；
p、 预加载=函数（）{
img=p.loadImage（“https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png");
};
p、 设置=函数（）{
p、 createCanvas（200200）；
};
p、 draw=函数（）{
//这将是一种更简单的图像绘制方法：
//p.image（img，0,0）；
p、 loadPixels（）；
img.loadPixels（）；
//处理高像素密度显示器。此代码有效地放大图像，使源图像中的每1个像素都是显示器中的密度*密度像素，从而保留图像的大小，但导致可见的像素化。
let density=p.像素密度（）；
对于（var x=0；x
由于您专门尝试从本地计算机加载图像，而不是从可公开访问的URL加载图像，因此通过用户交互输入文件将是唯一的方法。这是web浏览器故意设置的限制，以防止恶意网页非法读取本地文件中的数据。但是，有一种更简单的方法可以将图像数据从文件输入获取到p5js画布上。事实上，这个确切的用例可以在中看到


let输入；
让img；
函数设置（）{
输入=createFileInput（handleFile）；
输入位置（0,0）；
}
函数绘图（）{
背景（255）；
如果（img）{
图像（img，0，0，宽度，高度）；
}
}
函数句柄文件（文件）{
如果（file.type=='image'）{
img=createImg（file.data.）；
img.hide（）；
}否则{
img=null；
}
}

Html图像元素没有loadPixels方法。要获取像素，需要加载图像，在画布中绘制，然后在此画布上使用getImageData。Alice，我现在正尝试这样做，但问题是我不想向用户显示我用于绘制图像和从中获取像素的画布。当我不显示画布时，我从getImageData获得的数据是一个0数组。我正在努力