RubyGems - html2img - Versions diffs - 0.0.2 - Mend

html2img 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

checksums.yaml +7 -0
data/.gitignore +9 -0
data/Gemfile +4 -0
data/LICENSE.txt +21 -0
data/README.md +47 -0
data/Rakefile +2 -0
data/app/assets/javascripts/base64.js +1 -0
data/app/assets/javascripts/canvas2image.js +265 -0
data/app/assets/javascripts/html2canvas.js +2868 -0
data/app/assets/javascripts/html2img.js +49 -0
data/bin/console +14 -0
data/bin/setup +8 -0
data/html2img.gemspec +32 -0
data/lib/html2img/engine.rb +4 -0
data/lib/html2img/version.rb +3 -0
data/lib/html2img.rb +6 -0
metadata +87 -0

checksums.yaml ADDED Viewed

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 791e6e996cee67f7a04b4e4068e970d1b14ba7a2
+  data.tar.gz: 007e585f07062839704e5a17ddb6360c32b37d14
+SHA512:
+  metadata.gz: 0f24976559d9752f6de183b2ff4ec445ba4a5e295388d53667e338181c4dc413e00928cbb5cd5638a79bcf0f431133408c7e7841c4fc11edab7dd4dd5d59c3f8
+  data.tar.gz: ad2c75e633f3e84633696ce9944f415f75a9e680ccd8158392009796675166f332ce5129de49428a896dfc58b4d83f6e3c00963a70df8793f363f992e9d3cbb6

data/.gitignore ADDED Viewed

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/Gemfile ADDED Viewed

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+# Specify your gem's dependencies in html2img.gemspec
+gemspec

data/LICENSE.txt ADDED Viewed

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+Copyright (c) 2016 edmothershaw
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md ADDED Viewed

@@ -0,0 +1,47 @@
+# Html2img
+This gem enables you to download HTML elements at the click of a button. Requires JQuery.
+## Installation
+Add this line to your application's Gemfile:
+```ruby
+gem 'html2img'
+```
+And then execute:
+    $ bundle
+Or install it yourself as:
+    $ gem install html2img
+## Usage
+On the button that you want to start the download with add in the HTML of the element the class ```html2img-#download-#<id>``` where <id> is the id attribute of the element you want to download.
+An example
+```html
+<div id="block" style="height: 200px; width: 200px; background-color: pink;"></div>
+<input type="button" class="html2img-#download-#block btn" value="Download"/>
+```
+## Development
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+## Contributing
+Bug reports and pull requests are welcome on GitHub at https://github.com/edmothershaw/html2img. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require "bundler/gem_tasks"
2	+ task :default => :spec

data/app/assets/javascripts/base64.js ADDED Viewed

@@ -0,0 +1 @@

data/app/assets/javascripts/canvas2image.js ADDED Viewed

@@ -0,0 +1,265 @@
+/**
+ * covert canvas to image
+ * and save the image file
+ */
+var Canvas2Image = function () {
+  // check if support sth.
+  var $support = function () {
+    var canvas = document.createElement('canvas'),
+      ctx = canvas.getContext('2d');
+    return {
+      canvas: !!ctx,
+      imageData: !!ctx.getImageData,
+      dataURL: !!canvas.toDataURL,
+      btoa: !!window.btoa
+    };
+  }();
+  var downloadMime = 'image/octet-stream';
+  function scaleCanvas (canvas, width, height) {
+    var w = canvas.width,
+      h = canvas.height;
+    if (width == undefined) {
+      width = w;
+    }
+    if (height == undefined) {
+      height = h;
+    }
+    var retCanvas = document.createElement('canvas');
+    var retCtx = retCanvas.getContext('2d');
+    retCanvas.width = width;
+    retCanvas.height = height;
+    retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
+    return retCanvas;
+  }
+  function getDataURL (canvas, type, width, height) {
+    canvas = scaleCanvas(canvas, width, height);
+    return canvas.toDataURL(type);
+  }
+  function saveFile (strData) {
+    document.location.href = strData;
+  }
+  function genImage(strData) {
+    var img = document.createElement('img');
+    img.src = strData;
+    return img;
+  }
+  function fixType (type) {
+    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
+    var r = type.match(/png|jpeg|bmp|gif/)[0];
+    return 'image/' + r;
+  }
+  function encodeData (data) {
+    if (!window.btoa) { throw 'btoa undefined' }
+    var str = '';
+    if (typeof data == 'string') {
+      str = data;
+    } else {
+      for (var i = 0; i < data.length; i ++) {
+        str += String.fromCharCode(data[i]);
+      }
+    }
+    return btoa(str);
+  }
+  function getImageData (canvas) {
+    var w = canvas.width,
+      h = canvas.height;
+    return canvas.getContext('2d').getImageData(0, 0, w, h);
+  }
+  function makeURI (strData, type) {
+    return 'data:' + type + ';base64,' + strData;
+  }
+  /**
+   * create bitmap image
+   * 按照规则生成图片响应头和响应体
+   */
+  var genBitmapImage = function (oData) {
+    //
+    // BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
+    // BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
+    //
+    var biWidth  = oData.width;
+    var biHeight  = oData.height;
+    var biSizeImage = biWidth * biHeight * 3;
+    var bfSize  = biSizeImage + 54; // total header size = 54 bytes
+    //
+    //  typedef struct tagBITMAPFILEHEADER {
+    //    WORD bfType;
+    //    DWORD bfSize;
+    //    WORD bfReserved1;
+    //    WORD bfReserved2;
+    //    DWORD bfOffBits;
+    //  } BITMAPFILEHEADER;
+    //
+    var BITMAPFILEHEADER = [
+      // WORD bfType -- The file type signature; must be "BM"
+      0x42, 0x4D,
+      // DWORD bfSize -- The size, in bytes, of the bitmap file
+      bfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,
+      // WORD bfReserved1 -- Reserved; must be zero
+      0, 0,
+      // WORD bfReserved2 -- Reserved; must be zero
+      0, 0,
+      // DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
+      54, 0, 0, 0
+    ];
+    //
+    //  typedef struct tagBITMAPINFOHEADER {
+    //    DWORD biSize;
+    //    LONG  biWidth;
+    //    LONG  biHeight;
+    //    WORD  biPlanes;
+    //    WORD  biBitCount;
+    //    DWORD biCompression;
+    //    DWORD biSizeImage;
+    //    LONG  biXPelsPerMeter;
+    //    LONG  biYPelsPerMeter;
+    //    DWORD biClrUsed;
+    //    DWORD biClrImportant;
+    //  } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
+    //
+    var BITMAPINFOHEADER = [
+      // DWORD biSize -- The number of bytes required by the structure
+      40, 0, 0, 0,
+      // LONG biWidth -- The width of the bitmap, in pixels
+      biWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,
+      // LONG biHeight -- The height of the bitmap, in pixels
+      biHeight & 0xff, biHeight >> 8  & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,
+      // WORD biPlanes -- The number of planes for the target device. This value must be set to 1
+      1, 0,
+      // WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap
+      // has a maximum of 2^24 colors (16777216, Truecolor)
+      24, 0,
+      // DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed
+      0, 0, 0, 0,
+      // DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
+      biSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,
+      // LONG biXPelsPerMeter, unused
+      0,0,0,0,
+      // LONG biYPelsPerMeter, unused
+      0,0,0,0,
+      // DWORD biClrUsed, the number of color indexes of palette, unused
+      0,0,0,0,
+      // DWORD biClrImportant, unused
+      0,0,0,0
+    ];
+    var iPadding = (4 - ((biWidth * 3) % 4)) % 4;
+    var aImgData = oData.data;
+    var strPixelData = '';
+    var biWidth4 = biWidth<<2;
+    var y = biHeight;
+    var fromCharCode = String.fromCharCode;
+    do {
+      var iOffsetY = biWidth4*(y-1);
+      var strPixelRow = '';
+      for (var x = 0; x < biWidth; x++) {
+        var iOffsetX = x<<2;
+        strPixelRow += fromCharCode(aImgData[iOffsetY+iOffsetX+2]) +
+                 fromCharCode(aImgData[iOffsetY+iOffsetX+1]) +
+                 fromCharCode(aImgData[iOffsetY+iOffsetX]);
+      }
+      for (var c = 0; c < iPadding; c++) {
+        strPixelRow += String.fromCharCode(0);
+      }
+      strPixelData += strPixelRow;
+    } while (--y);
+    var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);
+    return strEncoded;
+  };
+  /**
+   * saveAsImage
+   * @param canvasElement
+   * @param {String} image type
+   * @param {Number} [optional] png width
+   * @param {Number} [optional] png height
+   */
+  var saveAsImage = function (canvas, width, height, type) {
+    if ($support.canvas && $support.dataURL) {
+      if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
+      if (type == undefined) { type = 'png'; }
+      type = fixType(type);
+      if (/bmp/.test(type)) {
+        var data = getImageData(scaleCanvas(canvas, width, height));
+        var strData = genBitmapImage(data);
+        saveFile(makeURI(strData, downloadMime));
+      } else {
+        var strData = getDataURL(canvas, type, width, height);
+        saveFile(strData.replace(type, downloadMime));
+      }
+    }
+  };
+  var convertToImage = function (canvas, width, height, type) {
+    if ($support.canvas && $support.dataURL) {
+      if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
+      if (type == undefined) { type = 'png'; }
+      type = fixType(type);
+      if (/bmp/.test(type)) {
+        var data = getImageData(scaleCanvas(canvas, width, height));
+        var strData = genBitmapImage(data);
+        return genImage(makeURI(strData, 'image/bmp'));
+      } else {
+        var strData = getDataURL(canvas, type, width, height);
+        return genImage(strData);
+      }
+    }
+  };
+  return {
+    saveAsImage: saveAsImage,
+    saveAsPNG: function (canvas, width, height) {
+      return saveAsImage(canvas, width, height, 'png');
+    },
+    saveAsJPEG: function (canvas, width, height) {
+      return saveAsImage(canvas, width, height, 'jpeg');
+    },
+    saveAsGIF: function (canvas, width, height) {
+      return saveAsImage(canvas, width, height, 'gif');
+    },
+    saveAsBMP: function (canvas, width, height) {
+      return saveAsImage(canvas, width, height, 'bmp');
+    },
+    convertToImage: convertToImage,
+    convertToPNG: function (canvas, width, height) {
+      return convertToImage(canvas, width, height, 'png');
+    },
+    convertToJPEG: function (canvas, width, height) {
+      return convertToImage(canvas, width, height, 'jpeg');
+    },
+    convertToGIF: function (canvas, width, height) {
+      return convertToImage(canvas, width, height, 'gif');
+    },
+    convertToBMP: function (canvas, width, height) {
+      return convertToImage(canvas, width, height, 'bmp');
+    }
+  };
+}();