描述
JavaScript Load Image是一个用于加载以File或Blob对象提供的图像或通过URL加载的库。它返回一个可选的缩放和/或裁剪的HTML img或canvas元素。它还提供了解析图像元数据以提取IPTC和Exif标记以及嵌入的缩略图图像以及在调整大小后恢复完整图像标题的方法。
建立
在HTML标记中包含（合并和缩小的）JavaScript加载图像脚本：
或者，选择要包含的组件：
用法
图像加载
在您的应用程序代码中，使用loadImage（）函数，如下所示：
图像缩放
也可以将图像缩放功能与现有图像一起使用：
要求
JavaScript加载映像库没有依赖关系。
但是，JavaScript Load Image是Canvas to Blob库的非常合适的补充 。
API
所述的LoadImage（）函数接受 文件或 斑点对象或一个简单的图像的URL（例如'https://example.org/image.png'）作为第一个参数。
如果将File或 Blob作为参数传递，则如果浏览器支持URL API或 FileReader对象（如果支持），则返回HTML img元素 ，或者返回false。 它在传递图像URL时始终返回HTML img元素：
loadImage（）函数返回的img元素或 FileReader对象允许通过将onload和onerror事件处理程序设置为null 来中止加载过程：
第二个参数必须是回调函数，在加载图像或加载图像时发生错误时调用该函数。回调函数传递两个参数。
第一个是HTML img元素， canvas元素或类型为error的 Event对象。 第二个是对象，原始图像尺寸为属性，可能还有其他元数据：
选项
loadImage（）的可选第三个参数是选项映射：
maxWidth：定义img / canvas元素的最大宽度。
maxHeight：定义img / canvas元素的最大高度。
minWidth：定义img / canvas元素的最小宽度。
minHeight：定义img / canvas元素的最小高度。
sourceWidth：要绘制到目标画布中的源图像的子矩形的宽度。
默认为源图像宽度和要求canvas: true。
sourceHeight：要绘制到目标画布中的源图像的子矩形的高度。
默认为源图像高度和要求canvas: true。
top：源图像的子矩形的上边距。
默认为0和要求canvas: true。
right：源图像的子矩形的右边距。
默认为0和要求canvas: true。
bottom：源图像的子矩形的下边距。
默认为0和要求canvas: true。
left：源图像的子矩形的左边距。
默认为0和要求canvas: true。
包含：如果设置为，则向上/向下缩放图像以将其包含在最大尺寸中true。
这模拟了CSS特征 background-image：contains。
封面：如果设置为，则向上/向下缩放图像以覆盖图像尺寸的最大尺寸true。
这模拟了CSS功能 background-image：cover。
aspectRatio：将图像裁剪为给定的宽高比（例如16/9）。
设置aspectRatio也启用该crop选项。
pixelRatio：定义画布像素与屏幕上物理图像像素的比率。
应设置为window.devicePixelRatio除非缩放的图像未在屏幕上呈现。
默认为1和要求canvas: true。
downsamplingRatio：定义图像下采样的比率。
默认情况下，图像会在一个步骤中进行下采样。使用比率0.5，每个步骤在达到目标尺寸之前将图像缩放到尺寸的一半。
需要canvas: true。
crop：如果设置为，则将图像裁剪为maxWidth / maxHeight约束 true。
启用该crop选项也会启用该canvas选项。
取向：根据指定的Exif取向，其可以是一个变换的画布integer中的范围1到8或布尔值true。
设置true为时，它将根据图像的EXIF数据设置方向值，如果exif库可用，将自动解析。
设置orientation也启用该canvas选项。
设置orientation为true也启用该meta选项。
meta：如果设置为，则自动解析图像元数据true。
元数据作为第二个参数的一部分传递给回调。
如果文件以URL形式提供，并且浏览器支持 fetch API，则将文件提取为Blob以便能够解析元数据。
canvas：如果设置为，则将图像作为canvas元素返回 true。
crossOrigin：在img元素上设置crossOrigin属性以加载 启用CORS的图像。
noRevoke：默认情况下， 创建的对象URL 在加载图像后被撤销，除非此选项设置为 true。
它们可以通过以下方式使用：
所有设置都是可选的。默认情况下，图像作为HTML img 元素返回，没有任何图像大小限制。
元数据解析
如果包含Load Image Meta扩展，则还可以使用以下meta选项自动解析图像元数据：
该扩展还提供了方法loadImage.parseMetaData，可以通过以下方式使用：
注意：
可以通过canvas.toBlob（）创建已调整大小的图像的Blob对象 。
Meta数据扩展还添加了用于该parseMetaData方法的其他选项 ：
maxMetaDataSize：要解析的元数据的最大字节数。
disableImageHead：禁用解析原始图像头。
Exif解析器
如果包含Load Image Exif Parser扩展，则传递给parseMetaData的回调的参数将包含附加属性exif，如果可以在给定图像中找到Exif数据。
该EXIF对象存储解析EXIF标签：
var orientation= data。exif [ 0x0112 ];
它还提供了一个exif.get（）方法，通过标签的映射名称检索标记值：
var orientation= data。exif。得到（' Orientation '）;
默认情况下，唯一可用的映射名称是Orientation和 Thumbnail。
如果还包括Load Image Exif Map库，则可以使用其他标记映射，以及另外两个方法exif.getText（）和 exif.getAll（）：
varflashText =data。exif。getText（' Flash '）;//例如：'Flash fired，auto mode'，//所有已解析标记的映射，其映射名称/文本为键/值：varallTags =data。exif。getAll（）;
Exif解析器还为parseMetaData方法添加了其他选项，以禁用解析器的某些方面：
disableExif：禁用Exif解析。
disableExifThumbnail：禁用解析Exif缩略图。
disableExifSub：禁用Exif Sub IFD的解析。
disableExifGps：禁用Exif GPS Info IFD的解析。
IPTC解析器
如果包含Load Image IPTC Parser扩展，则传递给parseMetaData回调的参数将包含附加属性iptc，如果可以在给定图像中找到IPTC数据。
该IPTC对象存储解析IPTC标签：
var objectname= data。iptc [ 0x5 ];
它还提供了一个iptc.get（）方法，通过标签的映射名称检索标记值：
varobjectname =data。iptc。get（' ObjectName '）;
默认情况下，唯一可用的映射名称是ObjectName。
如果还包括Load Image IPTC Map库，则可以使用其他标记映射，以及另外两种方法iptc.getText（）和 iptc.getAll（）：
varkeywords =data。iptc。getText（' Keywords '）;//例如：['天气'，'天空']//所有已解析标记的映射，其映射名称/文本为键/值：varallTags =data。iptc。getAll（）;
IPTC解析器还为parseMetaData方法添加了其他选项，以禁用解析器的某些方面：
disableIptc：禁用IPTC解析。
执照
JavaScript加载映像脚本在MIT许可下 发布。
积分
基于AchimStöhr的帮助和贡献的图像元数据处理实现。
Exif标签基于Jacob Seidelin的exif-js库进行映射 。
Dave Bevan的 IPTC解析器实现。
网友评论