image-resize-tools

Development Setup

# install deps
npm i image-resize-tools --save

# compress files
npm install
npm run compress

Seven methods in tools

Include the library

in the browser:

<script src="http://www.wangyulue.com/assets/js/image_resize_tools/resize.common.js"></script>

in the node:

const imageResizeTools = require("image-resize-tools")

Use examples

<input id="demo" type="file" onchange="view()">

function view(){
    var file = document.getElementById('demo').files[0];
    console.log(file);
    imageResizeTools.fileResizetoFile(file,0.6,function(res){
        //回调中的res是一个压缩后的Blob类型（可以当做File类型看待）文件；
        //The res in the callback is a compressed Blob type (which can be treated as a File type) file;
        console.log(res);
        //do something
    })
}

Use Promise

Use too many callback functions does not look elegant,as follows:

var canvas = imageResizeTools.imagetoCanvas(img);
imageResizeTools.canvasResizetoFile(canvas,quality,file=>{
    imageResizeTools.filetoDataURL(file,data=>{
        imageResizeTools.dataURLtoImage(data,img=>{
            //do something
        })
    })
})

So, we recommend use resize.promise.js ,as follows:

in the browser, we change the script:

<script src="http://www.wangyulue.com/assets/js/image_resize_tools/resize.promise.js"></script>

in the node, we default use promise.

use like this:

imageResizeTools.imagetoCanvas(img)
    .then(canvas => imageResizeTools.canvasResizetoFile(canvas,quality))
    .then(file => imageResizeTools.filetoDataURL(file))
    .then(data => imageResizeTools.dataURLtoImage(data))
    .then(img => {
        //do something
    })
})

or like this:

const canvas = await imageResizeTools.imagetoCanvas(img);
const dataURL = await imageResizeTools.canvasResizetoDataURL(canvas,quality);
const file = await imageResizeTools.dataURLtoFile(dataURL);
const data = await imageResizeTools.filetoDataURL(file);
const image = await imageResizeTools.dataURLtoImage(data);
//do something

Description document

王玉略的个人网站

License

MIT