initial commit v0.1.0

agilgur5 · agilgur5 · commit 8d7104a4fedc · 2016-09-01T20:10:06.000Z
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+npm-debug.log*
+node_modules/
+
+build/
+*.tgz
+
+.DS_Store
+*~
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,7 @@
+npm-debug.log*
+node_modules/
+
+*.tgz
+
+.DS_Store
+*~
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,13 @@
+Copyright (c) 2016 Anton Gilgur
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/README.md b/README.md
@@ -0,0 +1,33 @@
+# trim-canvas
+
+A tiny (< 100 LoC) library for trimming whitespace from a `canvas` element with
+no dependencies.
+
+## Installation
+
+`npm i -S trim-canvas`
+
+## Usage
+
+```
+import trimCanvas from 'trim-canvas'
+
+let canvas = document.createElement('canvas')
+
+// do some drawing on it ...
+
+trimCanvas(canvas)
+// now the whitespace has been trimmed
+```
+
+If you don't want to mess with your existing canvas, then simply clone the
+canvas element beforehand.
+
+`trim-canvas` returns the canvas element for easy chaining.
+
+## Credits
+
+Credits go to [@efc](https://github.com/efc) for writing a quick version of this
+in [this issue](https://github.com/szimek/signature_pad/issues/49#issue-29108215)
+and to the original [StackOverflow Answer](http://stackoverflow.com/a/12178531/3431180)
+that was credited there.
diff --git a/index.es6 b/index.es6
@@ -0,0 +1,85 @@
+export default function trimCanvas (canvas) {
+  let context = canvas.getContext('2d')
+
+  let imgWidth = canvas.width
+  let imgHeight = canvas.height
+
+  let imgData = context.getImageData(0, 0, imgWidth, imgHeight).data
+
+  // get the corners of the relevant content (everything that's not white)
+  let cropTop = scanY(true, imgWidth, imgHeight, imgData)
+  let cropBottom = scanY(false, imgWidth, imgHeight, imgData)
+  let cropLeft = scanX(true, imgWidth, imgHeight, imgData)
+  let cropRight = scanX(false, imgWidth, imgHeight, imgData)
+
+  let cropXDiff = cropRight - cropLeft
+  let cropYDiff = cropBottom - cropTop
+  
+  // get the relevant data from the calculated coordinates
+  let trimmedData = context.getImageData(cropLeft, cropTop, cropXDiff,
+    cropYDiff)
+
+  // set the trimmed width and height
+  canvas.width = cropXDiff
+  canvas.height = cropYDiff
+  // clear the canvas
+  context.clearRect(0, 0, cropXDiff, cropYDiff)
+  // place the trimmed data into the cleared canvas to create
+  // a new, trimmed canvas
+  context.putImageData(trimmedData, 0, 0)
+  return canvas // for chaining
+}
+
+// returns the RGBA values of an x, y coord of imgData
+function getRGBA (x, y, imgWidth, imgData) {
+  return {
+    red: imgData[(imgWidth * y + x) * 4],
+    green: imgData[(imgWidth * y + x) * 4 + 1],
+    blue: imgData[(imgWidth * y + x) * 4 + 2],
+    alpha: imgData[(imgWidth * y + x) * 4 + 3]
+  }
+}
+
+function getAlpha (x, y, imgWidth, imgData) {
+  return getRGBA(x, y, imgWidth, imgData).alpha
+}
+
+// finds the first y coord in imgData that is not white
+function scanY (fromTop, imgWidth, imgHeight, imgData) {
+  let offset = fromTop ? 1 : -1
+  let firstCol = fromTop ? 0 : imgHeight - 1
+
+  // loop through each row
+  for (var y = firstCol; fromTop ? (y < imgHeight) : (y > -1); y += offset) {
+    // loop through each column
+    for (var x = 0; x < imgWidth; x++) {
+      // if not white, return col
+      if (getAlpha(x, y, imgWidth, imgData)) {
+        return y                        
+      }      
+    }
+  }
+
+  // the whole image is white already
+  return null
+}
+
+// finds the first x coord in imgData that is not white
+function scanX (fromLeft, imgWidth, imgHeight, imgData) {
+  let offset = fromLeft ? 1 : -1
+  let firstRow = fromLeft ? 0 : imgWidth - 1
+
+  // loop through each column
+  for (var x = firstRow; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {
+    // loop through each row
+    for (var y = 0; y < imgHeight; y++) {
+      // if not white, return row
+      if (getAlpha(x, y, imgWidth, imgData)) {
+        return x                        
+      }      
+    }
+  }
+
+  // the whole image is white already
+  return null
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "trim-canvas",
+  "version": "0.1.0",
+  "description": "A tiny library for trimming whitespace from a `canvas` element.",
+  "main": "build/index.js",
+  "devDependencies": {
+    "babel-core": "^6.0.14",
+    "babel-loader": "^6.0.0",
+    "babel-preset-es2015": "^6.6.0",
+    "webpack": "^1.12.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch -d",
+    "produce": "webpack -p",
+    "lint": "standard index.es6"
+  },
+  "keywords": [
+    "canvas",
+    "trim",
+    "whitespace",
+    "remove",
+    "blanks",
+    "removeBlanks",
+    "remove-blanks"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agilgur5/trim-canvas.git"
+  },
+  "author": "Anton Gilgur",
+  "license": "Apache-2.0"
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  entry: './index.es6',
+  output: {
+    path: './build',
+    filename: 'index.js',
+    library: 'trimCanvas',
+    libraryTarget: 'umd'
+  },
+  module: {
+    loaders: [{
+      test: /\.es6$/, loader: 'babel-loader', query: {presets: ['es2015']}
+    }]
+  }
+}
