twolfson / iframe2image

Convert an iframe to an image

iframe2image

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.

iframe2image's Issues

iframe2image___default(...) is not a function error in Angular 4

Hi ,

I am using Angular 4 and inside the iframe i have called my 3rd party visualization url to export the iframe content what i have did is

• I have installed npm install iframe2image
  -After that import iframe2image from 'iframe2image';
• on click i have called
  $("#btnSave-parent").click(function() {
  var canvas: any = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  canvas.width = 500;
  canvas.height = 600;
  // Grab the iframe
  var inner = document.getElementById('pcp');
  // 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);
  });
  });
  Also import the script files:
  "scripts": [
  "../node_modules/iframe2image/dist/iframe2image.min.js",
  "../node_modules/iframe2image/lib/domvas.js"
  ],
  After that i am getting below mentioned error could you please suggest me how i can resolve that issue.
  

Call code in function

I cant call this code ->

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
        canvas.width = 1180;
        canvas.height = 100;
        var inner = document.getElementById("if");
        iframe2image(inner, function(err,img){
            // Otherwise, add the image to the canvas
            context.drawImage(img, 0, 0);
        });

in function, for example ->

function getImg(c){
        console.log("Drawing image -> "+c);
        var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
        canvas.width = 1180;
        canvas.height = 100;
        var inner = document.getElementById("if");
        iframe2image(inner, function(err,img){
            // Otherwise, add the image to the canvas
            context.drawImage(img, 0, 0);
        });
        if(c != 0){
            var nc = c - 1;
            setTimeout(function(){
                getImg(nc);
            },5000);
        }
    }

is there a sulotion? :(

Snapshots

Hi, can this library be used to take multiple snapshots of an iframe that contains moving elements, eg an animate banner advert and get multiple images with a basic sequence of the animation?

Callback doesn't execute

The console.log inside iframe2image callback doesn't get called. There are no errors on browser

$('#get_image').on('click', function() {
	var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d');

	canvas.width = 300;
	canvas.height = 200;

	var iframe = document.getElementById('preview');
	console.log(iframe);

	iframe2image(iframe, function (err, img) {
		console.log(img);
		if (err) { return console.error(err); }
		context.drawImage(img, 0, 0);
	})
})

Canvas didn't work when there is image in iframe ?

Hello,

If I have the image(ex: background-image:url(test.png);) in my iframe, and I use iframe2image to convert my iframe into canvas.
However, the canvas won't show the backgroung-image.

Here is my sample code.
https://repl.it/@taihsinwu/Test-iframe-to-canvas

Does anybody have the same issue?

Thanks!