Added (resize)

desktop/sources/scripts/library.js

@@ -15,19 +15,31 @@ function Library (ronin) {
     return a
   }
 
-  this.save = (path, type = 'jpg') => {
+  this.save = (path = ronin.source.folder(), type = 'png', quality = 1.0) => {
-    console.log('save', path)
+    if (!path) { console.warn('Missing save path'); return path }
-    // TODO: Save file
+    var fullQuality = ronin.surface.el.toDataURL('image/png', quality)
+    const base64Data = url.replace(/^data:image\/png;base64,/, '')
+    fs.writeFile('image.png', base64Data, 'base64', function (err) {
+      console.warn('error', err)
+    })
     return path
   }
 
   this.draw = (path, rect, callback) => {
-    ronin.surface.draw(path, rect, callback)
+    const img = new Image()
+    img.src = path
+    ronin.surface.draw(img, rect, callback)
     return rect
   }
 
-  this.resize = (rect) => {
+  this.resize = (w = 1, h = 1, callback) => {
+    const rect = w <= 1 || h <= 1 ? { x: 0, y: 0, w: this.frame().w * w, h: this.frame().h * h } : { x: 0, y: 0, w, h }
+    const a = document.createElement('img')
+    const b = document.createElement('img')
+    a.src = ronin.surface.el.toDataURL()
+    ronin.surface.resizeImage(a, b)
     ronin.surface.resize(rect, true)
+    ronin.surface.draw(b, rect, callback)
     return rect
   }
 
@@ -114,11 +126,11 @@ function Library (ronin) {
   // Shapes
 
   this.pos = (x, y, t = 'pos') => {
-    return { x, y }
+    return { x, y, t }
   }
 
   this.size = (w, h, t = 'size') => {
-    return { w, h }
+    return { w, h, t }
   }
 
   this.rect = (x, y, w, h, t = 'rect') => {
@@ -315,5 +327,4 @@ function Library (ronin) {
 
   // javascript interop
   this.js = window
-
 }

desktop/sources/scripts/lisp.js

@@ -44,7 +44,7 @@ function Lisp (input, lib) {
       context.scope[identifier] = interpret(value, context)
       return value
     },
-    defn: function(input, context) {
+    defn: function (input, context) {
       const identifier = input[1].value
       const argumentNames = (input[2].type === TYPES.string) ? input[3] : input[2]
       const functionBody = (input[2].type === TYPES.string) ? input[4] : input[3]
@@ -52,7 +52,7 @@ function Lisp (input, lib) {
         // docstring
         console.log(input[2].value)
       }
-      context.scope[identifier] = function() {
+      context.scope[identifier] = function () {
         const lambdaArguments = arguments
         const lambdaScope = argumentNames.reduce(function (acc, x, i) {
           acc[x.value] = lambdaArguments[i]

desktop/sources/scripts/ronin.js

@@ -1,6 +1,6 @@
 function Ronin () {
   const defaultTheme = {
-    background: '#222',
+    background: '#111',
     f_high: '#fff',
     f_med: '#999',
     f_low: '#444',

desktop/sources/scripts/surface.js

@@ -116,9 +116,9 @@ function Surface (ronin) {
     const img = new Image()
     img.src = path
     img.onload = () => {
-      const rect = { w: img.width, h: img.height }
+      console.log(`Open img: ${img.width}x${img.height}`)
-      this.fitWindow(rect)
+      const rect = { x: 0, y: 0, w: img.width, h: img.height }
-      this.resize(rect)
+      this.resize(rect, true)
       this.context.drawImage(img, 0, 0, img.width, img.height)
       if (typeof callback === 'function') {
         callback()
@@ -126,11 +126,10 @@ function Surface (ronin) {
     }
   }
 
-  this.draw = function (path, rect = this.getFrame(), callback = () => {}) {
+  this.draw = function (img, rect = this.getFrame(), callback = () => {}) {
-    const img = new Image()
-    img.src = path
     img.onload = () => {
-      this.context.drawImage(img, rect.x, rect.y, rect.w, img.height * (rect.w / img.width))
+      console.log(`Drawing img: ${img.width}x${img.height}`)
+      this.context.drawImage(img, rect.x, rect.y, rect.w, rect.h) // no strect: img.height * (rect.w / img.width)
       if (typeof callback === 'function') {
         callback()
       }
@@ -170,7 +169,7 @@ function Surface (ronin) {
   }
 
   this.maximize = function () {
-    this.resize(this.getFrame())
+    this.resize({ x: 0, y: 0, w: window.innerWidth - 60, h: window.innerHeight - 60, t: 'rect' })
   }
 
   this.onResize = function () {
@@ -182,6 +181,43 @@ function Surface (ronin) {
   }
 
   this.getFrame = function () {
-    return { x: 0, y: 0, w: window.innerWidth - 60, h: window.innerHeight - 60, t: 'rect' }
+    return { x: 0, y: 0, w: this.el.width, h: this.el.height, t: 'rect' }
+  }
+
+  this.resizeImage = function (src, dst, type = 'image/jpeg', quality = 0.92) {
+    var tmp = new Image()
+    var canvas
+    var context
+    var cW
+    var cH
+
+    cW = src.naturalWidth
+    cH = src.naturalHeight
+
+    tmp.src = src.src
+    tmp.onload = function () {
+      canvas = document.createElement('canvas')
+
+      cW /= 2
+      cH /= 2
+
+      if (cW < src.width) {
+        cW = src.width
+      }
+      if (cH < src.height) {
+        cH = src.height
+      }
+
+      canvas.width = cW
+      canvas.height = cH
+      context = canvas.getContext('2d')
+      context.drawImage(tmp, 0, 0, cW, cH)
+
+      dst.src = canvas.toDataURL(type, quality)
+
+      if (cW <= src.width || cH <= src.height) { return }
+
+      tmp.src = dst.src
+    }
   }
 }

examples/resize.lisp

@@ -0,0 +1,16 @@
+; pixels
+
+(
+  (clear)
+
+  ; Filter
+
+  (def filter-action 
+    (lambda () (resize 0.5 0.5)))
+
+  ; Draw photo 
+  
+  (open 
+    "../../PREVIEW.jpg" 
+    filter-action)
+)