README

演示

描述

JavaScript Load Image 是一个库，用于加载作为 File 或 Blob 对象提供的图像或通过 URL 提供的图像。
它返回一个可选缩放和/或裁剪的 HTML img 或 canvas 元素。
它还提供了一个方法来解析图像元数据以提取 Exif 标签和缩略图，并在调整大小后恢复完整的图像头。

设置

在您的 HTML 标记中包含（最小化）JavaScript Load Image 脚本

<script src="js/load-image.min.js"></script>

或者，选择您想要包含的组件

<script src="js/load-image.js"></script>
<script src="js/load-image-ios.js"></script>
<script src="js/load-image-orientation.js"></script>
<script src="js/load-image-meta.js"></script>
<script src="js/load-image-exif.js"></script>
<script src="js/load-image-exif-map.js"></script>

用法

图像加载

在您的应用程序代码中，使用 loadImage() 函数如下所示

document.getElementById('file-input').onchange = function (e) {
    loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600} // Options
    );
};

图像缩放

也可以使用现有图像与图像缩放功能

var scaledImage = loadImage.scale(
    img, // img or canvas element
    {maxWidth: 600}
);

要求

JavaScript Load Image 库没有依赖项。

但是，JavaScript Load Image 是 Canvas to Blob 库的一个非常好的补充。

API

loadImage() 函数接受一个 File 或 Blob 对象或一个简单的图像 URL（例如，“http://example.org/image.png”）作为第一个参数。

如果传递了一个 File 或 Blob 作为参数，如果浏览器支持 URL API，则返回一个 HTML img 元素，如果支持，则返回一个 FileReader 对象，否则返回 false。
当传递一个图像 URL 时，它总是返回一个 HTML img 元素

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600}
    );
    if (!loadingImage) {
        // Alternative code ...
    }
};

loadImage() 函数返回的 img 元素或 FileReader 对象允许通过将 onload 和 onerror 事件处理器设置为 null 来中止加载过程

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600}
    );
    loadingImage.onload = loadingImage.onerror = null;
};

第二个参数必须是一个回调函数，当图像加载完成后或加载图像时发生错误时调用此函数。回调函数传递一个参数，该参数是 HTML img 元素、canvas 元素或类型为 error 的 Event 对象之一

var imageUrl = "http://example.org/image.png";
loadImage(
    imageUrl,
    function (img) {
        if(img.type === "error") {
            console.log("Error loading image " + imageUrl);
        } else {
            document.body.appendChild(img);
        }
    },
    {maxWidth: 600}
);

选项

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。
contain：如果设置为 true，则按比例缩放图像以包含最大尺寸。
这模仿了CSS功能 background-image: contain。
cover：如果设置为 true，则按比例缩放图像以覆盖最大尺寸。
这模仿了CSS功能 background-image: cover。
crop：如果设置为 true，则裁剪图像以符合 maxWidth/maxHeight 约束。
此功能假定 canvas: true。
orientation：允许根据EXIF方向规范转换画布坐标。
此功能假定 canvas: true。
canvas：如果设置为 true，则返回图像为 canvas 元素。
crossOrigin：为加载 CORS启用图像在 img 元素上设置 crossOrigin 属性。
noRevoke：默认情况下，在图像加载后，创建的对象URL会被撤销，除非此选项设置为 true。

可以使用以下方式使用它们

loadImage(
    fileOrBlobOrUrl,
    function (img) {
        document.body.appendChild(img);
    },
    {
        maxWidth: 600,
        maxHeight: 300,
        minWidth: 100,
        minHeight: 50,
        canvas: true
    }
);

所有设置都是可选的。默认情况下，图像作为没有任何图像尺寸限制的HTML img 元素返回。

元数据解析

如果包含Load Image Meta扩展，还可以解析图像元数据。
该扩展提供方法 loadImage.parseMetaData，可以使用以下方式使用

loadImage.parseMetaData(
    fileOrBlob,
    function (data) {
        if (!data.imageHead) {
            return;
        }
        // Combine data.imageHead with the image body of a resized file
        // to create scaled images with the original image meta data, e.g.:
        var blob = new Blob([
            data.imageHead,
            // Resized images always have a head size of 20 bytes,
            // including the JPEG marker and a minimal JFIF header:
            loadImage.blobSlice.call(resizedImage, 20)
        ], {type: resizedImage.type});
    },
    {
        maxMetaDataSize: 262144,
        disableImageHead: false
    }
);

第三个参数是一个选项对象，它定义了解析图像元数据的最大字节数，允许禁用imageHead的创建，并传递给通过loadImage扩展注册的段解析器，例如Exif解析器。

注意
可以通过 canvas.toBlob() 创建调整大小后的图像的Blob对象。

Exif解析器

如果包含Load Image Exif Parser扩展，如果给定图像中可以找到Exif数据，则 parseMetaData 回调的 data 包含额外的 exif 属性。
exif 对象存储解析的Exif标签

var orientation = data.exif[0x0112];

它还提供了一个 exif.get() 方法，通过标签的映射名称检索标签值

var orientation = data.exif.get('Orientation');

默认情况下，只有可用的映射名称是 Orientation 和 Thumbnail。
如果您还包含Load Image Exif Map库，则可以提供额外的标签映射，以及两个额外的方法，exif.getText() 和 exif.getAll()

var flashText = data.exif.getText('Flash'); // e.g.: 'Flash fired, auto mode',

// A map of all parsed tags with their mapped names as keys and their text values:
var allTags = data.exif.getAll();

Exif解析器还为parseMetaData方法提供了额外的选项，以禁用解析器的某些方面

disableExif：禁用Exif解析。
disableExifThumbnail：禁用解析Exif缩略图。
disableExifSub：禁用解析Exif子IFD。
disableExifGps：禁用解析Exif GPS Info IFD。

iOS缩放修复

在iOS（iPhone、iPad、iPod）中缩放兆像素图像可能导致图像失真（挤压）。
Load Image iOS缩放修复扩展解决了这些问题。

许可

JavaScript Load Image脚本在 MIT许可下发布。

致谢

基于Achim Stöhr的帮助和贡献，实现了图像元数据处理。
基于Jacob Seidelin的exif-js实现Exif标签映射。
基于Shinichi Tomita的ios-imagefile-megapixel修复了iOS图像缩放问题。

itlized / javascript-load-image

维护者

详细信息