imaya/CanvasTool.PngEncoder

Add minimal example and demo

murkle opened this issue · 0 comments

http://imaya.blog.jp/archives/4883165.html
http://jsdo.it/imaya/PngEncoder

{
  bitDepth: number,
  colourType: CanvasTool.PngEncoder.ColourType,
  compressionMethod: CanvasTool.PngEncoder.CompressionMethod,
  filterMethod: CanvasTool.PngEncoder.FilterMethod,
  filterType: CanvasTool.PngEncoder.BasicFilterType,
  interlaceMethod: CanvasTool.PngEncoder.InterlaceMethod,
  gamma: number;
  chrm: {
    whitePointX: number,
    whitePointY: number,
    redX: number,
    redY: number,
    greenX: number,
    greenY: number,
    blueX: number,
    blueY: number
  },
  splt: {
    name: string,
    num: number
  },
  srgb: CanvasTool.PngEncoder.RenderingIntent,
  sbit: Array.;
  iccp: Array,
  hist: boolean,
  phys: {
    x: number,
    y: number,
    unit: CanvasTool.PngEncoder.UnitSpecifier
  },
  time: Date,
  text: {
    keyword: string,
    text: string
  },
  ztxt: {
    keyword: string,
    text: string,
    compressionMethod: CanvasTool.PngEncoder.CompressionMethod
  },
  trns: boolean
}

Here's a minimal example to export a canvas with a set dpi:

		// convert dots per inch into dots per metre
		var pixelsPerM = dpi * 100 / 2.54;

		var param = {
			bitDepth : 8,
			colourType : 2,
			filterType : 0,
			height : canvas.height,
			interlaceMethod : 0,
			phys : {
				unit : 1,
				x : pixelsPerM,
				y : pixelsPerM
			},
			width : canvas.width
		};

		var array = canvas.getContext('2d').getImageData(0, 0, canvas.width,
				canvas.height).data;

		var png = new window.CanvasTool.PngEncoder(array, param).convert();

		var base64 = 'data:image/png;base64,' + btoa(png);