使用画布和JavaScript读取图像和数据

在此视频中，我将带您介绍如何使用JavaScript动态阅读图像数据的基础知识。我们将共同探讨如何以三种不同的方式读取图像数据 - 从服务器上的特定文件名，使用HTML文件上传字段以及通过拖放到窗口中。 该视频是我本人帕特里克·卡坦扎里蒂（Patrick Catanzariti）的课程中有关“操纵和使用JavaScript的图像和视频”课程的最新课程之一。该课程现在可以在SitePoint的Learning Platform Learnable.com上使用！ 画布 标签，视频标签和JavaScript是一支令人难以置信的团队，可以为您的网络创建带来全新的可能性。在“使用JavaScript操纵和使用图像和视频”课程中，您将了解有关如何使用HTML5和JavaScript操纵图像和视频的所有信息。我们将探索从更改基本颜色到使用JavaScript库（例如Trix.js）操纵视频数据的一系列可能性。 本课程可在这里提供。

>使用画布和javascript读取图像数据的常见问题（常见问题解答）

>我如何使用FileReader API在JavaScript中读取图像数据？

> FileReader API是JavaScript中的一个功能强大的工具，可让您读取存储在文件的内容（或原始数据缓冲区）的内容用户的计算机。要读取图像数据，您可以使用ReadAsdataurl方法，该方法读取指定的斑点或文件的内容。读取操作完成后，结果属性包含一个数据：表示文件数据的URL。 file“]'）'）;

让读取器= new FileReader（）; 让IMG = new image（）;
img.src = e.target.result;
img.onload = function（）{
//现在可以在img
}中使用图像数据;
} ;

input.onchange = function（e）{
>让file = e.target.files [0]; > Reader.ReadAsdataurl（file）;
};

在此代码中，我们首先选择文件输入并创建一个新的fileReader。然后，我们为读者设置了一个Onload事件，该事件创建了一个新图像，并将其源设置为读取操作的结果。最后，我们为输入设置了一个Onchange事件，当用户选择文件时，该事件将所选文件读取为数据URL。

>如何使用JavaScript从图像中提取文本？ JavaScript没有内置的OCR功能，但是有可用的库可以帮助您使用，例如tesseract.js。图像：

让tesseract = require（'tesseract.js'）;


'image.png'，
'eng'，
{logger：m => console.log（m）}
）。然后（（{data：{text}}}）=> > console.log（text）;
}）;

在此代码中，我们首先需要tesseract.js库。然后，我们调用识别方法，传递图像文件，语言（英语的“英语”）以及记录识别进度的记录器函数。识别识别完成后，承诺将用包含识别文本的对象解决，我们将其登录到控制台。

请注意，OCR是一个复杂的过程，并且识别的准确性可能会根据图像的质量及其内部文本。
>
>如何使用JavaScript FileReader构建图像预览？ FileReader涉及读取图像文件，然后将其显示在HTML元素中。这是一个简单的示例：

let input = document.queryselector（'input [type =“ file”]']'）;
让preview = document.queryselector（'img'）;

让阅读器= new FileReader（）; };


input.onput.onchange = function（e）{
让file = e.target.files [0];
reader.readasdataurl（file） ;
};


在此代码中，我们首先选择将显示预览的文件输入和图像元素。然后，我们创建一个新的FileReader，并设置一个Onload事件，该事件将预览映像的来源设置为读取操作的结果。最后，我们为输入设置了一个on Change事件，当用户选择文件时，该事件将所选文件读取为数据URL。您想读取多个文件，可以通过在文件输入的文件阵列上循环循环。以下是一个示例：

让input = document.queryselector（'input [type =“ file”]'）;



input.onchange = function（e）{

i = 0; i console.log（e.target.Result）;};

reader.readasdataurl（e.target.files [i]） >};

>在此代码中，我们首先选择文件输入。然后，我们为在所选文件上循环的输入设置一个onchange事件，为每个文件创建一个新的fileReader，并将每个文件读取为数据URL。每个读取操作的结果都记录到控制台。

>使用JavaScript FileReader读取文件时，我该如何处理错误？

> FileReader API提供了几个您可以使用这些事件来处理错误的事件，包括OnError和Onabort。以下是如何使用以下事件的示例：

让input = document.queryselector（'input [type =“ file”]']）;
>
reader.onload =函数（e）{> console.log（e.target.result）;
};


reader.onerror = function（）{ console.error（'读取文件时发生了错误。'）; };


reader.onabort = function（）{console.error（'读取操作是中止。'）;
};


input.onchange = function（e）{
让file = e.target.files [0]; reader.readaSdataurl（file）;
};


在此代码中，我们首先选择文件输入并创建一个新的fileReader。然后，我们为读者设置Onload，Onerror和Onabort活动。 Onload事件记录了读取操作的结果，而OnError和Onabort事件日志错误消息。最后，我们为输入设置了一个Onchange事件，该事件将所选文件读取为数据URL时，当用户选择文件时。

以上是使用画布和JavaScript读取图像和数据的详细内容。更多信息请关注PHP中文网其他相关文章！