Skip to content

KELEN/ImageFileConvert

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ImageFileConvert

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

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

参数 类型 说明
file file type 文件类型
option object 配置项
width 宽度
height 高度
cover 是否覆盖整个区域,默认false
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

参数 类型 说明
blob blob 二进制文件
let img = ImageFileConvert.blobToImage(blob);

fileToCanvas(file, option);

file translate to canvas and image, get canvas and image

参数 类型 说明
file file type 文件类型
option object 配置项
width 宽度
height 高度
cover 是否覆盖整个区域,默认false
ImageFileConvert.fileToCanvas(file, { width: 400, height: 400 }).then(({ canvas, image }) => {
  document.body.appendChild(canvas);
})

fileToImage(file);

file translate to image

参数 类型 说明
file file type 文件类型
ImageFileConvert.fileToImage(file).then(img => {
    document.body.appendChild(img);
})

imageToCanvas(img);

image translate to canvas

参数 类型 说明
img image element 图片
let canvas = ImageFileConvert.imageToCanvas(img);

canvasToImage(canvas);

canvas tranlate to image, return promise

参数 类型 说明
canvas canvas canvas
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

参数 类型 说明
canvas canvas 需要绘制的canvs
image img img元素
degree int 角度
ImageFileConvert.rotate(cvs, img, degree);