【源码】基于JavaScript的图片大小适配显示插件

项目简介

本项目是基于JavaScript的图片大小适配显示插件，主要用于解决网页尤其是移动端页面中图片大小适配显示的问题。通过canvas实现图片的等比缩放和裁剪，让图片以最优方式显示，同时具备图片延迟加载功能，可优化页面性能。

项目的主要特性和功能

1. 图片等比缩放：依据容器大小自动计算缩放比例，避免图片变形。
2. 图片裁剪：当图片超出容器大小时，可按需求裁剪，实现完美适配。
3. 延迟加载：支持图片延迟加载，减少页面加载时的性能损耗。
4. 多种显示模式：提供cover和contain两种显示模式，满足不同需求。
5. 易于集成：支持AMD、CMD等多种加载方式，方便集成到项目中。

安装使用步骤

假设用户已下载本项目的源码文件。 1. 引入插件：在项目的js文件中引入ImageAdapt插件。 2. 创建实例：在需要适配图片显示的区域创建ImageAdapt实例，传入相应的参数。 3. 初始化插件：调用插件的init方法，开始图片适配显示。

使用示例： javascript var imgAdept = new ImageAdapt('#img_list', { type: 'cover', // cover:铺满；contain：包含 size: '[300, 200]', // 图片显示尺寸 imgSlt: 'data-img', // img 标签中获取原图 URL 的属性 times: 1, // X 倍图 bgColor: '#eee' // contain 模式时，用于填充背景的颜色 }); imgAdept.init();

注意事项

1. 请确保页面中的img标签添加了自定义属性，如data-img，以获取原图的URL。
2. 线上站点需要设置CORS策略，允许主站域名进行跨域操作。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】