npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-image2dataurl

v15.0.0

Published

An Angular component which reads the `dataURL` and optionally resizes the selected input file image.

Downloads

14,956

Readme

ngx-image2dataurl

An Angular component which reads the dataURL and optionally resizes the selected input file image.

Demo

Install

npm install ngx-image2dataurl --save

Usage

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ImageToDataUrlModule } from "ngx-image2dataurl";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageToDataUrlModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { Options, ImageResult } from "ngx-image2dataurl";

@Component({
  selector: 'app-root',
  template: `
    <img [src]="src" *ngIf="src"><br>
    <input type="file" [imageToDataUrl]="options"
      (imageSelected)="selected($event)">
  `
})
export class AppComponent {
  src: string = null;
  options: Options = {
    resize: {
      maxHeight: 128,
      maxWidth: 128
    },
    allowedExtensions: ['JPG', 'PnG']
  };

  selected(imageResult: ImageResult) {
    if (imageResult.error) alert(imageResult.error);
    this.src = imageResult.resized
      && imageResult.resized.dataURL
      || imageResult.dataURL;
  }
}

API

selector: input[type=file][imageToDataUrl]

event: (imageSelected)

event fired (async) when the file input changes and the image's dataURL is calculated and the image is resized.

export interface ImageResult {
  file: File;
  url: string;
  dataURL?: string;
  error?: any;
  resized?: {
      dataURL: string;
      type: string;
  }
}

If any error happens, the error field is set with an error message. (e.g. 'Extension Not Allowed' or 'Image processing error') If the error happens during resizing, file, url (objectURL) of the original image is still set.

property: [imageToDataUrl] - options

export interface ResizeOptions {
  maxHeight?: number;
  maxWidth?: number;
  quality?: number;
  type?: string;
}

export interface Options {
  resize?: ResizeOptions;
  allowedExtensions?: string[];
}
  • resize: default undefined
  • resize.maxHeight
  • resize.maxWidth
  • resize.quality: default: 0.7
  • resize.type: default: as the original image
  • allowedExtensions: default: undefined

Resize algorithm ensures, that the resized image can fit into the specified resize.maxHeight x resize.maxWidth size.

Allowed extensions array (e.g. ['jpg', 'jpeg', 'png']; case insensitive): if specified and an input file has different extension the (imageSelected) event is fired with the error field set to 'Extension Not Allowed'. dataURL and resize not calculated at all.

Multi-Injector IMAGE_FILE_PROCESSOR as ImageFileProcessor

interface ImageFileProcessor {
  process(dateURL: string): Promise<string>;
}

This interface allows to plugin-in any image processing logic which works on the opened file's dataURL and should return a promise of the processed image's dataURL. You can provide multiple image processors which are changed: ones input is the output of the previous processor.

The initial idea of this feature comes from a request and PR to support automatic EXIF rotation of images. Since I didn't want to package any EXIF processing dependency with this library, I decided to let the users plug-in their own solution. See an old PR from the legacy repo to get some idea how to handle.

There are two utility function you can use:

createImageFromDataUrl(dataURL: string): Promise<HTMLImageElement>: creates an image from dataURL which can be used to draw into a canvas.

getImageTypeFromDataUrl(dataURL): Promise<HTMLImageElement>: determines the MIME type of the image represented by the dataURL. Can be used in Canvas.toDataURL(type) method.

Example

// define the processor in the providers section
providers: [
  {
    provide: IMAGE_FILE_PROCESSOR,
    useClass: RotateImageFileProcessor,
    multi: true
  }
]

import { 
  createImageFromDataUrl, getImageTypeFromDataUrl, ImageFileProcessor
} from "ngx-image2dataurl";

// the processor
export class RotateImageFileProcessor implements ImageFileProcessor {
  async process(dataURL: string): Promise<string> {
    const canvas = document.createElement('canvas');
    const image = await createImageFromDataUrl(dataURL);
    canvas.width = image.height;
    canvas.height = image.width;
    const ctx = canvas.getContext("2d");
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 2);
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
    ctx.restore();
    return canvas.toDataURL(getImageTypeFromDataUrl(dataURL));
  }
}