Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    iframe2imagepublic

    iframe2image Donate on Gittip

    Convert an iframe to an image

    Getting Started

    On the server

    Install the module with: npm install iframe2image. This is only practical with a tool like browserify.

    In the browser

    Download the production version or the development version.

    You will also need domvas on your site. iframe2image pre-packaged with domvas can be found in both production version and [development versionmaxWithDomvas.

    In your web page:

    <script src="dist/iframe2image.min.js"></script>
    <script>
    iframe2image(myIframe, cb);
    </script> 

    In your code, you can attach iframe2image's methods to any object.

    <script>
    this.exports = MyGlobal.utils;
    </script> 
    <script src="dist/iframe2image.min.js"></script>
    <script>
    MyGlobal.utils.iframe2image(myIframe, cb);
    </script> 

    Documentation

    iframe2image is exposed via a single function

    /**
     * Convert an iframe to an image
     * @param {Object|HtmlElement} params If it is an object, properties will be looked up. If it is an iframe, it will be converted into an image.
     * @param {HTMLElement} params.iframe Iframe to convert over
     * @param {Function} cb Callback to execute once iframe is converted
     * @callback arguments[0] Error if any occurred
     * @callback arguments[1] Image element of rendered content
     */

    Examples

    Taken from the demo folder:

    // Set up the canvas dimensions 
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
    canvas.width = 500;
    canvas.height = 600;
     
    // Grab the iframe 
    var inner = document.getElementById('inner');
     
    // Get the image 
    iframe2image(inner, function (err, img) {
      // If there is an error, log it 
      if (err) { return console.error(err); }
     
      // Otherwise, add the image to the canvas 
      context.drawImage(img, 0, 0);
    });

    Contributing

    In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

    Also, please don't edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "lib" subdirectory!

    License

    Copyright (c) 2012 Todd Wolfson Licensed under the MIT license.

    install

    npm i iframe2image

    Downloadslast 7 days

    7

    version

    0.2.1

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar