From e4959173567d230c8e3ecc03a20196e7dcaa6cc7 Mon Sep 17 00:00:00 2001 From: or-else Date: Tue, 26 Sep 2017 14:43:46 -0700 Subject: [PATCH] simplified handling of inline images --- drafty.js | 22 ++++++------ index.html | 99 +++++++++++++++++++++--------------------------------- 2 files changed, 49 insertions(+), 72 deletions(-) diff --git a/drafty.js b/drafty.js index db480e82..be141306 100644 --- a/drafty.js +++ b/drafty.js @@ -89,7 +89,7 @@ Sample JSON representation of the text above: LN: { name: 'a', isVoid: false }, MN: { name: 'a', isVoid: false }, HT: { name: 'a', isVoid: false }, - IM: { name: ['a','img'], isVoid: true } + IM: { name: 'img', isVoid: true } }; // Convert base64-encoded string into Blob. @@ -142,17 +142,15 @@ Sample JSON representation of the text above: }, props: function(data) { var url = base64toObjectUrl(data.val, data.mime); - return [ - { - download: data.name, - href: url - }, - { - src: url, - width: data.width, - height: data.height, - } - ]; + return { + src: url, + title: data.name, + 'data-width': data.width, + 'data-height': data.height, + 'data-name': data.name, + 'data-size': (data.val.length * 0.75) | 0, + 'data-mime': data.mime + }; }, } }; diff --git a/index.html b/index.html index 9dc31291..cbfe6ff0 100644 --- a/index.html +++ b/index.html @@ -83,34 +83,34 @@ 'data:image/' + photo.type + ';base64,' + photo.data : null; } + // Scale liner dimensions to fit uder certain size + function imageScaleDown(width, height, maxWidth, maxHeight) { + if (!width || !height || !maxWidth || !maxHeight) { + return null; + } + var scale = Math.min( + Math.min(width, maxWidth) / width, + Math.min(height, maxHeight) / height + ); + + return {width: (width * scale) | 0, height: (height * scale) | 0}; + } + // Convert uploaded image into a base64-encoded string. function imageFileToBase64(file, callback) { var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { - var width, height; - if (this.height > this.width) { - height = this.height; - while(height > MAX_IMAGE_SIZE) { - height = height >> 1; - } - width = (this.width * height / this.height) | 0; - } else { - width = this.width; - while(width > MAX_IMAGE_SIZE) { - width = width >> 1; - } - height = (this.height * width / this.width) | 0; - } + var size = imageScaleDown(this.width, this.height, MAX_IMAGE_SIZE, MAX_IMAGE_SIZE); var canvas = document.createElement('CANVAS'); - canvas.width = width; - canvas.height = height; + canvas.width = size.width; + canvas.height = size.height; var ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height); var imageBits = canvas.toDataURL("image/jpeg"); canvas = null; - callback(imageBits, width, height); + callback(imageBits, size.width, size.height); }; img.src = URL.createObjectURL(file); } @@ -2360,40 +2360,20 @@ var formatter = function(style, data, values) { elementKey += 1; - if (style == "IM") { - // Handle inline image - var width = data.width, height = data.height; - var style = null; - if (width && height) { - var scale = 1.0; - if (data.width > REM_SIZE * 36) { - scale = REM_SIZE * 36 / data.width; - } - if (data.height * scale > REM_SIZE * 24) { - scale = REM_SIZE * 24 / data.height; - } - style = { - width: Math.round(data.width * scale / REM_SIZE) + "rem", - height: Math.round(data.height * scale / REM_SIZE) + "rem" - } + var el = Drafty.tagName(style); + if (el) { + var attr = Drafty.attrValue(style, data) || {}; + attr.key = elementKey; + if (style == "IM") { + // Additional processing for images + var size = imageScaleDown(data.width, data.height, REM_SIZE * 36, REM_SIZE * 24); + attr.className = "inline-image"; + attr.style = size ? { width: size.width + "px", height: size.height + "px" } : null; + attr.onClick = this.handlePreviewImage; } - var url = Drafty.getBlobUrl(data); - return ( - - ); + return React.createElement(el, attr, values); } else { - var el = Drafty.tagName(style); - if (el) { - var attr = Drafty.attrValue(style, data) || {}; - attr.key = elementKey; - return React.createElement(el, attr, values); - } else { - return values; - } + return values; } }; @@ -2984,23 +2964,22 @@ if (!this.props.content) { return null; } - var instance = this; - var width = null, height = null; - console.log(this.props.content.width, this.props.content.height, this.state.width, this.state.height); - if (this.props.content.width && this.props.content.height) { - width = Math.max(Math.min(this.state.width, this.props.content.width), 8); - height = Math.max(Math.min(this.state.height, this.props.content.height), 8); - var scale = Math.min(width / this.props.content.width, height / this.props.content.height, 1.0); - width = (this.props.content.width * scale) | 0; - height = (this.props.content.height * scale) | 0; + var size = imageScaleDown(this.props.content.width, this.props.content.height, + this.state.width, this.state.hight); + if (size) { + size.width += "px"; + size.height += "px"; + } else { + size = (this.props.content.width > this.props.content.height) ? + {width: '100%'} : {height: '100%'}; } var filename = this.props.content.filename; if (filename.length > 20) { filename = filename.slice(0, 8) + "..." + filename.slice(-8); } return ( -
- +