README

JavaScript 库，用于加载和转换图像文件。

演示

描述

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

设置

将（合并和压缩过的）JavaScript Load Image 脚本包含到您的 HTML 标记中

<script src="js/load-image.all.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（例如 'https://example.org/image.png'）作为第一个参数。

如果传递了 File 或 Blob 参数，如果浏览器支持 URL API，则返回一个 HTML img 元素，如果支持 FileReader 对象，则返回一个 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 = "https://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 中。
默认为源图像宽度，需要 canvas: true。
sourceHeight：源图像的子矩形高度，用于绘制到目标 canvas 中。
默认为源图像高度，并需要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。
aspectRatio：将图像裁剪到给定的宽高比（例如，16/9）。
此功能假定crop: true。
crop：如果设置为true，则将图像裁剪到maxWidth/maxHeight约束。
此功能假定canvas: true。
orientation：允许根据EXIF方向规范转换画布坐标。
此功能假定canvas: true。
canvas：如果设置为true，则返回作为canvas元素的图像。
crossOrigin：为img元素设置crossOrigin属性以加载CORS启用图像。
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扩展，则parseMetaData回调的数据包含额外的属性exif，如果可以在给定图像中找到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 Sub IFD的解析。
disableExifGps：禁用Exif GPS Info IFD的解析。

iOS 缩放修复

在iOS（iPhone、iPad、iPod）上缩放兆像素图像可能会导致图像扭曲（挤压）。
加载图片iOS缩放修复扩展解决了这些问题。

许可证

JavaScript 加载图片脚本在 MIT 许可证下发布。

鸣谢

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

silvestra / javascript-load-image

维护者

详细信息