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