完全使用原生 JavaScript 开发的轻量级前端图片工具助手
cdn 引入
<script src="https://unpkg.com/cuteimage"></script>
<script src="https://cdn.jsdelivr.net/npm/cuteimage"></script>
npm 安装
npm install cuteimage -S
const CuteImage = require( "cuteimage" );
<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const isImage = await CuteImage( this.files[ 0 ] ).isImage();
console.log( isImage ? "是图片" : "不是图片" );
}
</script>
Promise。 isImage 方法，判断出是正确的图片后，才会继续执行各个方法所对应的功能。可以说，isImage 方法是 CuteImage 中最重要的一个方法，是其它所有方法的依赖。jpg、jpeg、png、gif、bmp、webp、tiff、tif 等格式，如果传入其它格式的图片，将会直接判断为不是图片！！！<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const type = await CuteImage( this.files[ 0 ] ).isImage();
// isImage() 方法会返回检测出的图片格式
// 如果返回空字符串，则表示不是图片
console.log( type ? `是图片，格式为：${ type }` : "不是图片" );
}
</script>
jpg 或 jpeg 图片，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回失败结果 false，否则会正常返回 isJPG 的检测结果 true 或 false。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const isJPG = await CuteImage( this.files[ 0 ] ).isJPG();
console.log( isJPG ? "是 jpg 图片" : "不是 jpg 图片" );
}
</script>
png 图片，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回失败结果 false，否则会正常返回 isPNG 的检测结果 true 或 false。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const isPNG = await CuteImage( this.files[ 0 ] ).isPNG();
console.log( isPNG ? "是 png 图片" : "不是 png 图片" );
}
</script>
bmp 图片，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回失败结果 false，否则会正常返回 isBMP 的检测结果 true 或 false。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const isBMP = await CuteImage( this.files[ 0 ] ).isBMP();
console.log( isBMP ? "是 bmp 图片" : "不是 bmp 图片" );
}
</script>
gif 图片，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回失败结果 false，否则会正常返回 isGIF 的检测结果 true 或 false。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const isGIF = await CuteImage( this.files[ 0 ] ).isGIF();
console.log( isGIF ? "是 gif 图片" : "不是 gif 图片" );
}
</script>
webp 图片，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回失败结果 false，否则会正常返回 isWEBP 的检测结果 true 或 false。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const isWEBP = await CuteImage( this.files[ 0 ] ).isWEBP();
console.log( isWEBP ? "是 webp 图片" : "不是 webp 图片" );
}
</script>
tiff 或 tif 图片，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回失败结果 false，否则会正常返回 isTIFF 的检测结果 true 或 false。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const isTIFF = await CuteImage( this.files[ 0 ] ).isTIFF();
console.log( isTIFF ? "是 tiff 图片" : "不是 tiff 图片" );
}
</script>
Promise。 isImage 方法，如果检测出不是图片则直接返回 0 或空数组（在传入 true 参数的情况下），否则会正常返回 size 的获取结果。true 做为参数，此时返回结果将变为数组形式，包含两个值：
<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const size1 = await CuteImage( this.files[ 0 ] ).size();
const size2 = await CuteImage( this.files[ 0 ] ).size( true );
console.log( `体积：${ size1 }` );
console.log( `体积：${ size2 }` );
}
</script>
Promise。 isImage 方法，如果检测出不是图片则直接返回空字符串，否则会正常返回 name 的获取结果。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const name = await CuteImage( this.files[ 0 ] ).name();
console.log( `图片名：${ name }` );
}
</script>
Promise。 isImage 方法，如果检测出不是图片则直接返回空字符串，否则会正常返回 type 的获取结果。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const type = await CuteImage( this.files[ 0 ] ).type();
console.log( `图片格式：${ type }` );
}
</script>
blob 形式 ，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回 null，否则会正常返回 toBlob 的转换结果。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const blob = await CuteImage( this.files[ 0 ] ).toBlob();
console.log( blob );
}
</script>
dataUrl 形式 ，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回空字符串，否则会正常返回 toDataUrl 的转换结果。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const dataUrl = await CuteImage( this.files[ 0 ] ).toDataUrl();
console.log( dataUrl );
}
</script>
url 形式 ，返回 Promise。 isImage 方法，如果检测出不是图片则直接返回空字符串，否则会正常返回 toURL 的转换结果。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const url = await CuteImage( this.files[ 0 ] ).toURL();
// 此 url 可直接设置到 <img> 的 src 属性中
console.log( url );
}
</script>
File 或 Blob 或 DataUrl）转换为 File 文件流形式 ，返回 Promise。 isImage 方法中所列出的所支持的图片格式，如果不符合上述两点，则直接返回 null，否则会正常返回 toFile 的转换结果。name，即此参数在这种情况下无效。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const file = await CuteImage( this.files[ 0 ] ).toFile( "自定义的图片名称" );
console.log( file );
}
</script>
Promise。 isImage 方法，如果检测出不是图片则直接返回空数组，否则会正常返回 dimension 的获取结果，数组形式，包含三个值：宽度、高度、宽高比。tiff 和 tif 图片的宽高尺寸，这两种格式将直接返回空数组。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const dimension = await CuteImage( this.files[ 0 ] ).dimension();
console.log( dimension );
}
</script>
Promise。 isImage 方法，如果检测出不是图片则直接返回 false，否则根据下载情况返回 true 或 false。true 和 false 仅是做为是否成功下载的标识，并且在调起浏览器下载功能后就返回结果，不会等待是否下载完成。<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
const result = await CuteImage( this.files[ 0 ] ).download( "自定义的图片名称" );
console.log( result ? "下载成功" : "下载失败" );
}
</script>
Promise。 isImage 方法，如果检测出不是图片则直接返回 null，否则会返回压缩结果（压缩成功则返回压缩后的数据，压缩失败返回 null）。tiff、tif、gif 等格式的图片；jpg 格式；png 或 webp 格式且包含透明通道，压缩后由于转换成了 jpg 格式，因此原有的透明通道将失效。quality：压缩后的图片质量，取 0 - 1 之间的数字，默认值：0.5dimension：压缩后的图片宽高尺寸，支持 Array 和 Function 类型，默认值：[ 1920 ]
Array 类型，规则是：[ width, height ]，其中 width 必填，若省略 height，则按照原始宽高比自动设置高度；Function 类型，则可根据实际需要动态设置宽高，函数会将原始宽高做为参数提供给开发者使用。fastMode：快速模式，Boolean 类型，默认值：false。开启快速模式后，将不会对传入的图片进行 isImage 检测，且 dimension 参数将不支持函数形式。dataUrl：压缩后的图片 dataUrl 编码file：压缩后的图片文件流（其中包含了一个自定义属性 calcSize，表示格式化后的体积）dimension：压缩后的图片宽高尺寸originalFile：原始图片文件流<input id="file" type="file" accept="image/*" />
<script>
document.getElementById( "file" ).onchange = async function () {
// 此示例中 compress 方法未传入任何参数
// 则压缩后的图片质量为 0.5，宽度为 1920px，高度按照原始宽高比自动设置
const result1 = await CuteImage( this.files[ 0 ] ).compress();
console.log( result1 );
// 此示例中 compress 方法传入了如下参数
// 则压缩后的图片质量为 0.6，宽度为 1000px，高度为 500px
const result2 = await CuteImage( this.files[ 0 ] ).compress({
quality: 0.6,
dimension: [ 1000, 500 ]
});
console.log( result2 );
// 此示例中 compress 方法传入了如下参数
// 则压缩后的图片质量为 0.7，宽高均为原始宽高的一半
const result3 = await CuteImage( this.files[ 0 ] ).compress({
quality: 0.7,
dimension: ( originalWidth, originalHeight ) => {
return [ originalWidth / 2, originalHeight / 2 ];
}
});
console.log( result3 );
// 此示例中 compress 方法设置了 faseMode: true 表示开启快速模式
// 此时将不再调用 isImage 方法检测是否为图片，默认就认为传入的文件流是图片（可节省 isImage 函数执行时所消耗的时间）
// 同时 dimension 将不再支持 function 形式，若设置了 function 形式，将自动转换为 [ 1920 ]（可节省 dimension 函数执行时所消耗的时间）
const result4 = await CuteImage( this.files[ 0 ] ).compress({
fastMode: true
});
console.log( result4 );
}
</script>
| Chrome | Firefox | Opera | Edge | Safari | IE |
|---|---|---|---|---|---|
| last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | 不支持 |
FAQs
完全使用原生 JavaScript 开发的轻量级前端图片工具助手
The npm package cuteimage receives a total of 13 weekly downloads. As such, cuteimage popularity was classified as not popular.
We found that cuteimage demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A compromised jscrambler npm release added a malicious preinstall hook that runs hidden native binaries on Linux, macOS, and Windows.
Research
/Security News
A malicious .NET package is typosquatting the Braintree SDK to steal live payment card data, merchant API keys, and host secrets from production apps.
Security News
/Research
Compromised Injective SDK npm version 1.20.21 exfiltrates wallet private keys and mnemonics through fake telemetry functionality.