Capture HTML Canvas as gif jpg png pdf

Question

Is it possible to capture or print what s displayed in an html canvas as an image or pdf    I d like to generate an image via canvas  and be able to generate a png from that image

User · Answer

function exportCanvasAsPNG id  fileName         var canvasElement   document getElementById id        var MIME TYPE    image png        var imgURL   canvasElement toDataURL MIME TYPE        var dlLink   document createElement  a        dlLink download   fileName      dlLink href   imgURL      dlLink dataset downloadurl    MIME TYPE  dlLink download  dlLink href  join            document body appendChild dlLink       dlLink click        document body removeChild dlLink

User · Answer

If you are using jQuery  which quite a lot of people do  then you would implement the accepted answer like so   var canvas       mycanvas   0   var img   canvas toDataURL  image png         elememt-to-write-to   html   lt img src    img     gt

User · Answer

I thought I d extend the scope of this question a bit  with some useful tidbits on the matter   In order to get the canvas as an image  you should do the following   var canvas   document getElementById  mycanvas    var image   canvas toDataURL  image png      You can use this to write the image to the page   document write   lt img src    image     gt       Where  image png  is a mime type  png is the only one that must be supported   If you would like an array of the supported types you can do something along the lines of this   var imageMimes     image png    image bmp    image gif    image jpeg    image tiff      Extend as necessary  var acceptedMimes   new Array    for i   0  i  lt  imageMimes length  i          if canvas toDataURL imageMimes i   search imageMimes i   gt  0            acceptedMimes acceptedMimes length    imageMimes i             You only need to run this once per page - it should never change through a page s lifecycle   If you wish to make the user download the file as it is saved you can do the following   var canvas   document getElementById  mycanvas    var image   canvas toDataURL  image png   replace  image png    image octet-stream      Convert image to  octet-stream   Just a download  really  window location href   image    If you re using that with different mime types  be sure to change both instances of image png  but not the image octet-stream  It is also worth mentioning that if you use any cross-domain resources in rendering your canvas  you will encounter a security error when you try to use the toDataUrl method

User · Answer

This is the other way  without strings although I don t really know if it s faster or not  Instead of toDataURL  as all questions here propose   In my case want to prevent dataUrl base64 since I need a Array buffer or view  So the other method in HTMLCanvasElement is toBlob   TypeScript function       export function canvasToArrayBuffer canvas  HTMLCanvasElement  mime  string   Promise lt ArrayBuffer gt      return new Promise  resolve  reject    gt  canvas toBlob async  d    gt        if  d          const r   new FileReader          r addEventListener  loadend   e   gt            const ab   r result          if  ab              resolve ab as ArrayBuffer                     else              reject new Error  Expected FileReader result                         r addEventListener  error   e   gt            reject e                  r readAsArrayBuffer d             else         reject new Error  Expected toBlob   to be defined                mime       Another advantage of blobs is you can create ObjectUrls to represent data as files  similar to HTMLInputFile s  files  member  More info  https   developer mozilla org en docs Web API HTMLCanvasElement toBlob

User · Answer

if you want to emebed the canvas you can use this snippet  lt  DOCTYPE html gt   lt html lang  quot en quot  gt   lt head gt       lt meta charset  quot UTF-8 quot  gt       lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0 quot  gt       lt title gt Document lt  title gt   lt  head gt   lt body gt       lt canvas id canvas width 200 height 200 gt  lt  canvas gt       lt iframe id  img  width 200 height 200 gt  lt  iframe gt       lt script gt          window onload   function                 var canvas   document getElementById  quot canvas quot                var context   canvas getContext  quot 2d quot                context fillStyle    quot green quot               context fillRect 50  50  100  100               document getElementById  img   src   canvas toDataURL  quot image jpeg quot                console log canvas toDataURL  quot image jpeg quot                    lt  script gt   lt  body gt   lt  html gt

User · Answer

The simple answer is just to take the blob of it and set the img src to a new object URL of that blob  then add that image to a PDF using some library  like  x000D   x000D  var ok   document createElement  canvas   ok width   400 ok height   140 var ctx   ok getContext  2d    for let k   0  k  lt  ok height  k             k             Math floor                  Math random                   10                   0      amp  amp   y   gt        for var i   0  i  lt  ok width  i            if i   25    0            ctx globalAlpha   Math random           ctx fillStyle                rgb                Math random     255                   Math random     255                   Math random     255                            wdth   gt            ctx fillRect              Math sin                i   Math PI   180                                Math random                   ok width              Math cos                i   Math PI   180                  wdth   y              wdth              wdth                       15                     k   ok toBlob blob   gt      k src   URL createObjectURL blob     x000D   lt img id k gt  x000D   x000D   x000D   Alternatively  if you wanted to work with low-level byte data  you can get the raw bytes of the canvas  then  depending on the file spec  write the raw image data into the necessary bytes of the data  you just need to call ctx getImageData 0  0  ctx canvas widht  ctx canvas height  to get the raw image data  then based on the file specification  write it to that

User · Answer

HTML5 provides Canvas toDataURL mimetype  which is implemented in Opera  Firefox  and Safari 4 beta  There are a number of security restrictions  however  mostly to do with drawing content from another origin onto the canvas    So you don t need an additional library   e g     lt canvas id canvas width 200 height 200 gt  lt  canvas gt    lt script gt        window onload   function               var canvas   document getElementById  canvas              var context   canvas getContext  2d              context fillStyle    green             context fillRect 50  50  100  100                no argument defaults to image png  image jpeg  etc also work on some              implementations -- image png is the only one that must be supported per spec            window location   canvas toDataURL  image png              lt  script gt    Theoretically this should create and then navigate to an image with a green square in the middle of it  but I haven t tested

User · Answer

Here is some help if you do the download through a server  this way you can name convert post-process etc your file    -Post data using toDataURL  -Set the headers   filename    test jpg     or png header  Content-Description  File Transfer    if  msie    strstr   SERVER  HTTP USER AGENT    MSIE    false          header  Content-type  application force-download   else          header  Content-type  application octet-stream     header  Content-Disposition  attachment  filename    filename         header  Content-Transfer-Encoding  binary     header  Expires  0    header  Cache-Control  must-revalidate     header  Pragma  public      -create image   data     POST  data     img   imagecreatefromstring base64 decode substr  data strpos  data      1       -export image as JPEG   width   imagesx  img    height   imagesy  img    output   imagecreatetruecolor  width   height    white   imagecolorallocate  output   255  255  255   imagefilledrectangle  output  0  0   width   height   white   imagecopy  output   img  0  0  0  0   width   height   imagejpeg  output   exit      -or as transparent PNG  imagesavealpha  img  true   imagepng  img   die  img

User · Answer

Another interesting solution is PhantomJS  It s a headless WebKit scriptable with JavaScript or CoffeeScript   One of the use case is screen capture   you can programmatically capture web contents  including SVG and Canvas and or Create web site screenshots with thumbnail preview   The best entry point is  the screen capture wiki page   Here is a good example for polar clock  from RaphaelJS     gt phantomjs rasterize js http   raphaeljs com polar-clock html clock png   Do you want to render a page to a PDF     gt  phantomjs rasterize js  http   en wikipedia org w index php title Jakarta amp printable yes  jakarta pdf

User · Answer

I would use  wkhtmltopdf   It just work great  It uses webkit engine  used in Chrome  Safari  etc    and it is very easy to use   wkhtmltopdf stackoverflow com questions 923885  this question pdf   That s it   Try it

User · Answer

Oops  Original answer was specific to a similar question  This has been revised    var canvas   document getElementById  mycanvas    var img      canvas toDataURL  image png      with the value in IMG you can write it out as a new Image like so   document write   lt img src    img     gt

User · Answer

You can use jspdf to capture a canvas into an image or pdf like this   var imgData   canvas toDataURL  image png                  var doc   new jsPDF  p    mm    doc addImage imgData   PNG   10  10   doc save  sample-file pdf      More info  https   github com MrRio jsPDF

User · Answer

On some versions of Chrome  you can    Use the draw image function ctx drawImage image1  0  0  w  h  Right-click on the canvas

[javascript] Capture HTML Canvas as gif/jpg/png/pdf?

Examples related to javascript

Examples related to html

Examples related to canvas

Examples related to export

Examples related to png