Nitrogen Poisonous Monoxide

    conversion_cargo
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.21 • Public • Published

    conversion_cargo

    Build Status Version License minified size

    conversion_cargo is a simple and easy-to-use JS image convert tools, which provides many methods to convert between Image,Canvas,File and dataURL.

    In addition,conversion_cargo can specify size to compress the image (test here).

    Methods Map

    Alt text

    Getting started

    Install

    npm i conversion_cargo --save
    
    # or 
    
    yarn add conversion_cargo

    Include the library

    in browser:

    <script src="https://www.npmjs.com/package/conversion_cargo/v/2.1.2/build/conversion.js"></script>

    in CommonJS:

    const imageConversion = require("conversion_cargo")

    in ES6:

    import * as imageConversion from 'conversion_cargo';

    or

    import {compress, compressAccurately} from 'conversion_cargo';

    Use examples

    <input id="demo" type="file" onchange="view()">
    1. Compress image to 200kb:
    function view(){
      const file = document.getElementById('demo').files[0];
      console.log(file);
      imageConversion.compressAccurately(file,200).then(res=>{
        //The res in the promise is a compressed Blob type (which can be treated as a File type) file;
        console.log(res);
      })
    }
    
    // or use an async function
    async function view() {
      const file = document.getElementById('demo').files[0];
      console.log(file);
      const res = await imageConversion.compressAccurately(file,200)
      console.log(res);
    }
    1. Compress images at a quality of 0.9
    function view(){
      const file = document.getElementById('demo').files[0];
      console.log(file);
      imageConversion.compress(file,0.9).then(res=>{
        console.log(res);
      })
    }

    Methods list

    conversion_cargo provides many methods to convert between Image,Canvas,File and dataURL,as follow:

    imagetoCanvas(image[, config]) → {Promise(Canvas)}

    Description:

    Convert an image object into a canvas object.

    Parameters:

    Name Type Attributes Description
    image image a image object
    config object optional with this config you can zoom in, zoom out, and rotate the image

    Example:

    imageConversion.imagetoCanvas(image);
    
    //or
    
    imageConversion.imagetoCanvas(image,{
      width: 300,   //result image's width
      height: 200,  //result image's height
      orientation:2,//image rotation direction
      scale: 0.5,   //the zoom ratio relative to the original image, range 0-10;
                    //Setting config.scale will override the settings of
                    //config.width and config.height;
    })

    config.orientation has many options to choose,as follow:

    Options Orientation
    1
    2 horizontal flip
    3 180°
    4 vertical flip
    5 clockwise 90° + horizontal flip
    6 clockwise 90°
    7 clockwise 90° + vertical flip
    8 Counterclockwise 90°

    Returns:

    Promise that contains canvas object.

    dataURLtoFile(dataURL[, type]) → {Promise(Blob)}

    Description:

    Convert a dataURL string to a File(Blob) object. you can determine the type of the File object when transitioning.

    Parameters:

    Name Type Attributes Description
    dataURL string a dataURL string
    type string optional determine the converted image type;
    the options are "image/png", "image/jpeg", "image/gif".

    Returns:

    Promise that contains a Blob object.

    compress(file, config) → {Promise(Blob)}

    Description:

    Compress a File(Blob) object.

    Parameters:

    Name Type Description
    file File(Blob) a File(Blob) object
    config number | object if number type, range 0-1, indicate the image quality;
    if object type,you can pass parameters to the imagetoCanvas and dataURLtoFile method;
    Reference is as follow:

    Tips:

    If you compress png transparent images, please select 'image/png' type.

    Example:

    // number
    imageConversion.compress(file,0.8)
    
    //or
    
    // object
    imageConversion.compress(file,{
      quality: 0.8,
      type: "image/jpeg",
      width: 300,
      height: 200,
      orientation:2,
      scale: 0.5,
    })

    Returns:

    Promise that contains a Blob object.

    compressAccurately(file, config) → {Promise(Blob)}

    Description:

    Compress a File(Blob) object based on size.

    Parameters:

    Name Type Description
    file File(Blob) a File(Blob) object
    config number | object if number type, specify the size of the compressed image(unit KB);
    if object type,you can pass parameters to the imagetoCanvas and dataURLtoFile method;
    Reference is as follow:

    Tips:

    If you compress png transparent images, please select 'image/png' type

    Example:

    // number
    imageConversion.compressAccurately(file,100); //The compressed image size is 100kb
    // object
    imageConversion.compressAccurately(file,{
      size: 100,    //The compressed image size is 100kb
      accuracy: 0.9,//the accuracy of image compression size,range 0.8-0.99,default 0.95;
                    //this means if the picture size is set to 1000Kb and the
                    //accuracy is 0.9, the image with the compression result
                    //of 900Kb-1100Kb is considered acceptable;
      type: "image/jpeg",
      width: 300,
      height: 200,
      orientation:2,
      scale: 0.5,
    })

    Returns:

    Promise that contains a Blob object.

    canvastoDataURL(canvas[, quality, type]) → {Promise(string)}

    Description:

    Convert a Canvas object into a dataURL string, this method can be compressed.

    Parameters:

    Name Type Attributes Description
    canvas canvas a Canvas object
    quality number optional range 0-1, indicate the image quality, default 0.92
    type string optional determine the converted image type;
    the options are "image/png", "image/jpeg", "image/gif",default "image/jpeg"

    Returns:

    Promise that contains a dataURL string.

    canvastoFile(canvas[, quality, type]) → {Promise(Blob)}

    Description:

    Convert a Canvas object into a Blob object, this method can be compressed.

    Parameters:

    Name Type Attributes Description
    canvas canvas a Canvas object
    quality number optional range 0-1, indicate the image quality, default 0.92
    type string optional determine the converted image type;
    the options are "image/png", "image/jpeg", "image/gif",default "image/jpeg"

    Returns:

    Promise that contains a Blob object.

    dataURLtoImage(dataURL) → {Promise(Image)}

    Description:

    Convert a dataURL string to a image object.

    Parameters:

    Name Type Description
    dataURL string a dataURL string

    Returns:

    Promise that contains a Image object.

    downloadFile(file[, fileName])

    Description:

    Download the image to local.

    Parameters:

    Name Type Attributes Description
    file File(Blob) a File(Blob) object
    fileName string optional download file name, if none, timestamp named file

    filetoDataURL(file) → {Promise(string)}

    Description:

    Convert a File(Blob) object to a dataURL string.

    Parameters:

    Name Type Description
    file File(Blob) a File(Blob) object

    Returns:

    Promise that contains a dataURL string.

    urltoBlob(url) → {Promise(Blob)}

    Description:

    Load the required Blob object through the image url.

    Parameters:

    Name Type Description
    url string image url

    Returns:

    Promise that contains a Blob object.

    urltoImage(url) → {Promise(Image)}

    Description:

    Load the required Image object through the image url.

    Parameters:

    Name Type Description
    url string image url

    Returns:

    Promise that contains Image object.

    License

    MIT

    Install

    npm i conversion_cargo

    DownloadsWeekly Downloads

    8

    Version

    2.1.21

    License

    MIT

    Unpacked Size

    40.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • yetfeng