image-file-convert v0.0.2

ImageFileConvert

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

demo

USAGE

copy dist imageFileConvert.umd.js for usage

USE NPM

npm i image-file-convert

import ImageFileConvert from 'image-file-convert'

<input type="file" accept="image/*" onchange="fileChange(event)">
<script src="../dist/imageFileConvert.umd.js"></script>
<script>
function fileChange(ev) {
  let file = ev.target.files[0];
  ImageFileConvert.getImageFileData(file, { width: 600, height: 800, cover: false }).then(({ blob, base64 }) => {
    let img = ImageFileConvert.blobToImage(blob);
    img.style.width = '300px';
    console.log(blob, base64.length)
    document.body.appendChild(img);
  });
}
</script>

API

getImageFileData(file, option);

get image file input data, can compress size with option with and height

function fileChange(ev) {
  let file = ev.target.files[0];
  ImageFileConvert.getImageFileData(file, { width: 300, height: 400, cover: true }).then(blob => {
    let img = ImageFileConvert.blobToImage(blob);
    document.body.appendChild(img);
  })
}

blobToImage(blob)

blob translate to image, use for ImageFileData() result

let img = ImageFileConvert.blobToImage(blob);

fileToCanvas(file, option);

file translate to canvas and image, get canvas and image

ImageFileConvert.fileToCanvas(file, { width: 400, height: 400 }).then(({ canvas, image }) => {
  document.body.appendChild(canvas);
})

fileToImage(file);

file translate to image

ImageFileConvert.fileToImage(file).then(img => {
    document.body.appendChild(img);
})

imageToCanvas(img);

image translate to canvas

let canvas = ImageFileConvert.imageToCanvas(img);

canvasToImage(canvas);

canvas tranlate to image, return promise

ImageFileConvert.canvasToImage(cvs, 'image/png').then(canvas => {
  document.body.append(canvas);
})

canvasToFile(canvas);

canvas translate to file

let file = ImageFileConvert.canvasToFile(cvs);

canvasToBase64(canvas, type = 'image/png', encoderOptions = '0.92');

canvas to base64

let base64 = ImageFileConvert.canvasToBase64(cvs);

imageToBase64(img);

image translate to base64

let base64 = ImageFileConvert.imageToBase64(img);

rotate(canvas, image, degree);

rotate image by canvas and return canvas

ImageFileConvert.rotate(cvs, img, degree);