png

//
// convert rgba png
//
// Neil Gershenfeld 
// (c) Massachusetts Institute of Technology 2017
// 
// This work may be reproduced, modified, distributed, performed, and 
// displayed for any purpose, but must acknowledge the mods
// project. Copyright is retained and must be preserved. The work is 
// provided as is; no warranty is provided, and users accept all 
// liability.
//
// closure
//
(function(){
//
// module globals
//
var mod = {}
//
// name
//
var name = 'convert RGBA to PNG'
//
// initialization
//
var init = function() {
   }
//
// inputs
//
var inputs = {
   image:{type:'RGBA',
      event:function(evt){
         var ctx = mod.img.getContext("2d")
         ctx.canvas.width = evt.detail.width
         ctx.canvas.height = evt.detail.height 
         ctx.putImageData(evt.detail,0,0)
         mod.pxtext.nodeValue = evt.detail.width+' x '+evt.detail.height+' px'
         convert_image()
         }},
   imageInfo:{type:'object',
      event:function(evt){
         mod.nametext.value = evt.detail.name
         mod.dpitext.value = evt.detail.dpi
         update_info()
         }}
   }
//
// outputs
//
var outputs = {
   PNG:{type:'file',
      event:function(){
         }}
   }
//
// interface
//
var interface = function(div){
   mod.div = div
   //
   // on-screen drawing canvas
   //
   var canvas = document.createElement('canvas')
      canvas.width = mods.ui.canvas
      canvas.height = mods.ui.canvas
      canvas.style.backgroundColor = 'rgb(255,255,255)'
      div.appendChild(canvas)
      mod.canvas = canvas
   div.appendChild(document.createElement('br'))
   //
   // off-screen image canvas
   //
   var canvas = document.createElement('canvas')
      mod.img = canvas
   //
   // view button
   //
   var btn = document.createElement('button')
      btn.style.padding = mods.ui.padding
      btn.style.margin = 1
      btn.appendChild(document.createTextNode('view'))
      btn.addEventListener('click',function(){
         var win = window.open('')
         var btn = document.createElement('button')
            btn.appendChild(document.createTextNode('close'))
            btn.style.padding = mods.ui.padding
            btn.style.margin = 1
            btn.addEventListener('click',function(){
               win.close()
               })
            win.document.body.appendChild(btn)
         win.document.body.appendChild(document.createElement('br'))
         var canvas = document.createElement('canvas')
            canvas.width = mod.img.width
            canvas.height = mod.img.height
            win.document.body.appendChild(canvas)
         var ctx = canvas.getContext("2d")
            ctx.drawImage(mod.img,0,0)
         })
      div.appendChild(btn)
   div.appendChild(document.createTextNode(' '))
   //
   // info div
   //
   var info = document.createElement('div')
      info.setAttribute('id',div.id+'info')
      info.appendChild(document.createTextNode('file name: '))
      var input = document.createElement('input')
         input.type = 'text'
         input.size = 6
         input.addEventListener('input',function(){
            })
         info.appendChild(input)
         mod.nametext = input
      info.appendChild(document.createElement('br'))
      info.appendChild(document.createTextNode('dpi: '))
      var input = document.createElement('input')
         input.type = 'text'
         input.size = 6
         input.addEventListener('input',function(){
            mod.dpi = parseFloat(mod.dpitext.value)
            mod.mmtext.nodeValue = (25.4*mod.img.width/mod.dpi).toFixed(3)
               +' x '+(25.4*mod.img.height/mod.dpi).toFixed(3)+' mm'
            mod.intext.nodeValue = (mod.img.width/mod.dpi).toFixed(3)
               +' x '+(mod.img.height/mod.dpi).toFixed(3)+' in'
            outputs.imageInfo.event()
            })
         info.appendChild(input)
         mod.dpitext = input
      info.appendChild(document.createElement('br'))
      var text = document.createTextNode('px: ')
         info.appendChild(text)
         mod.pxtext = text
      info.appendChild(document.createElement('br'))
      var text = document.createTextNode('mm: ')
         info.appendChild(text)
         mod.mmtext = text
      info.appendChild(document.createElement('br'))
      var text = document.createTextNode('in: ')
         info.appendChild(text)
         mod.intext = text
      info.appendChild(document.createElement('br'))
      div.appendChild(info)
   }
//
// local functions
//
function convert_image() {
   var h = mod.img.height
   var w = mod.img.width
   if (w > h) {
      var x0 = 0
      var y0 = mod.canvas.height*.5*(1-h/w)
      var wd = mod.canvas.width
      var hd = mod.canvas.width*h/w
      }
   else {
      var x0 = mod.canvas.width*.5*(1-w/h)
      var y0 = 0
      var wd = mod.canvas.height*w/h
      var hd = mod.canvas.height
      }
   var ctx = mod.canvas.getContext("2d")
   ctx.clearRect(0,0,mod.canvas.width,mod.canvas.height)
   ctx.drawImage(mod.img,x0,y0,wd,hd)
   }
function update_info() {
   mod.dpi = parseFloat(mod.dpitext.value)
   mod.mmtext.nodeValue = (25.4*mod.img.width/mod.dpi).toFixed(3)
      +' x '+(25.4*mod.img.height/mod.dpi).toFixed(3)+' mm'
   mod.intext.nodeValue = (mod.img.width/mod.dpi).toFixed(3)
      +' x '+(mod.img.height/mod.dpi).toFixed(3)+' in'
   }
// return values
//
return ({
   name:name,
   init:init,
   inputs:inputs,
   outputs:outputs,
   interface:interface
   })
}())