ImgAbout

Repository

https://github.com/livelybone/img-about

ImageCompress

Example


原始图片

Minified image

转换图片

Minified image

Options






Code

var defaultOptions = {
compressType: 'scale', /* Compress type, options: `compressTypes` */
scale: 1, /* Scale factor, works when compressType is `scale` */
imageSize: 0, /* The fixed value of size, works when compressType is `fixedWidth`, `fixedHeight` or `fixedSize`. If imageSize is 0, it means convert to naturalSize */
imageType: '', /* The mine type of image returned */
quality: .8, /* Compress quality, works when imageType is `image/jpeg` or `image/webp` */
toBlob: false /* If it is false, the promise returned will be resolved with a base64 string */
}

var options = JSON.parse(JSON.stringify(defaultOptions))

function minify() {
var val = getEl('#file')[0].files[0]
if (val) {
console.log(val, options)
ImgAbout.imgCompress(val, options).then(function (result) {
if (typeof result === 'string') {
getEl('#show-img')[0].src = result
getEl('#show-img')[0].alt = val.name
} else {
console.log(result)
alert('See result in console')
}
}).catch(function (e) {
alert(e.toString())
})
} else {
alert('Please input the image file')
}
}

function bindOptions() {
var fileInput = getEl('#file')[0]
fileInput.addEventListener('change', function (ev) {
const file = ev.target.files[0]
getEl('#imageType')[0].value = file ? file.type : ''
options.imageType = file ? file.type : ''
Base64_Blob.blobToBase64(file).then(url => {
getEl('#origin-img')[0].src = url
getEl('#origin-img')[0].alt = file.name
})
})

var idArr = [
{ id: 'compressType', type: 'select' },
{ id: 'scale', type: 'number' },
{ id: 'imageSize', type: 'number' },
{ id: 'imageType', type: 'text' },
{ id: 'quality', type: 'number' },
{ id: 'toBlob', type: 'checkbox' }
]

idArr.forEach(function (item) {
var id = item.id
var el = getEl('#' + id)[0]
if (el) {
el.value = options[id]
el.checked = options[id]
var f = function (ev) {
/* console.log(ev, el.value, el.checked) */
if (item.type === 'number') {
options[id] = +ev.target.value
} else if (item.type === 'checkbox') {
options[id] = ev.target.checked
} else {
options[id] = ev.target.value
}
}
el.addEventListener('change', f)
} else {
console.warn('Id `' + id + '` is not exist')
}
})
}

bindOptions()

function download() {
var url = getEl('#show-img')[0].src
var name = getEl('#show-img')[0].alt
if (url) {
var a = document.createElement('a')
a.href = url
a.download = name
a.click()
a.remove()
} else {
alert('Have no compressed image!')
}
}

GetNaturalSize

Example

Code

function getSize() {
/* ImgAbout.getNaturalSize: (url: String|Image|File|FileList|Blob) => Promise<Object: {width, height}> */
ImgAbout.getNaturalSize(getEl('#img')[0]).then(function (size) {
getEl('#size-1')[0].innerText = 'naturalWidth: ' + size.width + ', naturalHeight: ' + size.height
})
}

GetNaturalSize by url

Example


Code

function getSizeUrl() {
var val = getEl('#input')[0].value
if (val) {
/* ImgAbout.getNaturalSize: (url: String|Image|File|FileList|Blob) => Promise<Object: {width, height}> */
ImgAbout.getNaturalSize(val).then(function (size) {
getEl('#size-2')[0].innerText = 'naturalWidth: ' + size.width + ', naturalHeight: ' + size.height
}).catch(function (e) {
alert(e.toString())
})
} else {
alert('Please input the image url')
}
}