Stack Overflow
Stack Overflow

Questions tagged [html2canvas]

html2canvas is a JavaScript HTML-rendering library that lets you take "screenshots" of webpages based on the DOM.

From the official site:

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

1794 questions
1045
votes
7 answers

Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug. Screenshot by Jason Small, posted in a duplicate question. How are they doing this? …
joelvh
  • 16,700
  • 4
  • 28
  • 20
72
votes
18 answers

HTML2Canvas does not render full div, only what is visible on screen

I'm trying to use HTML2Canvas to render the contents of a div. Here is the code: var htmlSource = $('#potenzial-page')[0]; $('#btn').on("click", function() { html2canvas(htmlSource).then(function(canvas) { var img =…
L84
  • 45,514
  • 58
  • 177
  • 257
49
votes
8 answers

How to generate a PDF using Angular 7?

I have to generate a PDF report from data entered by a user, which would be saved in an object. So far, I have come across stuff which generates an HTML page and then takes a screenshot and converts it into PDF. I am looking to generate a PDF…
The Bored Theorist
  • 499
  • 1
  • 4
  • 4
48
votes
2 answers

How to use NPM package as normal javascript in HTML

I want to use html2canvas JS library in my application. I were able to use older versions of html2canvas in my application by directly loading html2canvas.js file in my HTML file. But newer versions are supported only through npm packages. When I…
Anil Agrawal
  • 2,748
  • 1
  • 24
  • 31
45
votes
10 answers

capture div into image using html2canvas

I'm trying to capture a div into an image using html2canvas I have read some similar question here like How to upload a screenshot using html2canvas? create screenshot of web page using html2canvas (unable to initialize properly) I have tried the…
Timeless
  • 7,338
  • 9
  • 60
  • 94
39
votes
5 answers

How to save img to user's local computer using HTML2canvas

I'm rendering a screenshot onclick with HTML2canvas .4.1 and want to save the image to user's local computer. How can this be accomplished? Please note that I'm a beginner, so actual code will be most helpful to me.
TheGrayVacuum
  • 703
  • 2
  • 7
  • 12
34
votes
9 answers

HTML2canvas generates Blurry images

I am using jsPDF and it uses html2canvas to generate an image from some html element and insert on the .pdf file. But there is a problem on html2canvas, it generates blurry images from the html. See example below: HTML…
jgabrielfaria
  • 1,543
  • 3
  • 15
  • 19
32
votes
4 answers

How to remove certain elements before taking screenshot?

I am able to take screenshot of the page using the example code below: html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); Now there are certain div's i dont want to be part of the page when…
user566245
  • 4,011
  • 1
  • 30
  • 36
26
votes
5 answers

Generate an image of a div and Save as

I'd like to create an input button "Save image" that : take a screen shot of a div ask to "Save as" on the user's computer I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly : function…
Jaggana
  • 540
  • 1
  • 6
  • 15
25
votes
2 answers

How to Set Size of Rendered Image

I'm confused with how to designate the size of the image that html2canvas generates. For example, I'd like to be able to have my DIV remain 400px x 400px but have the rendered image be 1200px x 1200px. I've looked at the documentation but I'm…
anonymoose
  • 1,169
  • 2
  • 21
  • 62
24
votes
5 answers

why there is a White space on the top on html2canvas?

There is a white space on my html2canvas and I am not sure what is going on. This is my code so far. function doFunction() { html2canvas(document.querySelector("#capture"), ).then(canvas => { $("body").append(canvas); …
john
  • 265
  • 1
  • 2
  • 5
23
votes
5 answers

html2canvas does not work with Google Maps Pan

I'm using html2canvas to save my online map as an image (See the Save as Image link). I've tried it in Firefox, Chrome and Opera. It tends to work more often if you do not alter the default map. If you zoom and then pan the map, it is less likely…
Aaron Kreider
  • 1,705
  • 5
  • 22
  • 44
23
votes
5 answers

html2canvas offscreen

In using html2canvas, I have a stack of DOM objects (relative positioned div's that contain various things), that I wish to create individual thumbnails for. So if there are ten divs, I will create ten thumbnails. Some of these objects will be…
sneuf
  • 708
  • 2
  • 7
  • 13
22
votes
4 answers

Html2Canvas problems with thai language

Run this code and then 'save' you will difference of image. Any solution to solved this problem? Example of code $(document).on("click", "#save", function() { html2canvas( $("body"), { onrendered: function(canvas) { …
lovepong
  • 625
  • 1
  • 9
  • 19
22
votes
8 answers

How to make transparent color white instead of black in html2canvas?

I'm trying to take a screenshot using html2canvas: var body = document.getElementById("body") $(body).html2canvas({onrendered: function( canvas ) { var urlData = canvas.toDataURL("image/jpeg"); }}); My body's background is transparent,…
Zelzer
  • 561
  • 1
  • 5
  • 16
1
2 3
…
99 100