image util to handle image file, canvas/image/blob/file translate

USAGE

<input type="file" accept="image/*" onchange="fileChange(event)"> <script src=".. /dist/imageFile.umd.js"></script> <script> function fileChange(ev) { let file = ev.target.files[0]; ImageFile.getImageFileData(file, { width: 300, height: 400, cover: false }).then(blob => { let img = ImageFile.blobToImage(blob); document.body.appendChild(img); }); } </script>Copy the code

API

getImageFileData(file, option);

Get the binary data after image conversion

parameter type instructions
file file type The file type
option object Configuration items
width The width of the
height highly
cover The default value is false 
function fileChange(ev) { let file = ev.target.files[0]; ImageFile.getImageFileData(file, { width: 300, height: 400, cover: true }).then(blob => { let img = ImageFile.blobToImage(blob); document.body.appendChild(img); })}Copy the code

fileToCanvas(file, option);

Convert the file to Canvas and image

parameter type instructions
file file type The file type
option object Configuration items
width The width of the
height highly
cover The default value is false 
ImageFile.fileToCanvas(file, { width: 400, height: 400 }).then(({ canvas, image }) => {
    document.body.appendChild(canvas);
})Copy the code

fileToImage(file);

File to image

ImageFile.fileToImage(file).then(img => {
    document.body.appendChild(img);
})
Copy the code

imageToCanvas(img);

image to canvas

let canvas = ImageFile.imageToCanvas(img);Copy the code

imageToBase64(img);

image to base64

let base64 = ImageFile.imageToBase64(img);Copy the code

rotate(canvas, image, degree);

Rotate the picture, you can rotate the picture to binary upload

parameter type instructions
canvas canvas Canvs that need to be drawn
image img Img element
degree int The Angle