From 79f85782ab19a6140ff0bbc60edcff0d166edc82 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 16 Jul 2019 09:51:19 +0900 Subject: [PATCH] Added (resize) --- desktop/sources/scripts/library.js | 29 +++++++++++----- desktop/sources/scripts/lisp.js | 4 +-- desktop/sources/scripts/ronin.js | 2 +- desktop/sources/scripts/surface.js | 54 +++++++++++++++++++++++++----- examples/resize.lisp | 16 +++++++++ 5 files changed, 84 insertions(+), 21 deletions(-) create mode 100644 examples/resize.lisp diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index a0a0b7a..a86298c 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -15,19 +15,31 @@ function Library (ronin) { return a } - this.save = (path, type = 'jpg') => { - console.log('save', path) - // TODO: Save file + this.save = (path = ronin.source.folder(), type = 'png', quality = 1.0) => { + if (!path) { console.warn('Missing save path'); return path } + 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') => { @@ -274,7 +286,7 @@ function Library (ronin) { } else if (args.length === 1) { // (random max) return Math.random() * args[0] - } + } return Math.random() } @@ -315,5 +327,4 @@ function Library (ronin) { // javascript interop this.js = window - } diff --git a/desktop/sources/scripts/lisp.js b/desktop/sources/scripts/lisp.js index c71c789..0ef700d 100644 --- a/desktop/sources/scripts/lisp.js +++ b/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] diff --git a/desktop/sources/scripts/ronin.js b/desktop/sources/scripts/ronin.js index 4b24b2a..e43c051 100644 --- a/desktop/sources/scripts/ronin.js +++ b/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', diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index a2af93f..aa92e1c 100644 --- a/desktop/sources/scripts/surface.js +++ b/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 } - this.fitWindow(rect) - this.resize(rect) + console.log(`Open img: ${img.width}x${img.height}`) + const rect = { x: 0, y: 0, w: img.width, h: img.height } + 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 = () => {}) { - const img = new Image() - img.src = path + this.draw = function (img, rect = this.getFrame(), callback = () => {}) { 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 + } } } diff --git a/examples/resize.lisp b/examples/resize.lisp new file mode 100644 index 0000000..edf6174 --- /dev/null +++ b/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) +) \ No newline at end of file