Image tag is not capturing

[gitbala]

Hi,

I tried to convert html to image using html2canvas, its working fine. But the image tag inside html elements is not converting, Given below one example:

## Working HTML Element

    <tr class="cldr-row-heading">
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
            <th class="last">Su</th>
        </tr>
        
        <tr class="cldr-row-date">
            <td class="disable"><div class="date-box"><span class="date">26</span></div></td>
            <td class="disable"><div class="date-box"><span class="date">27</span></div></td>
            <td class="disable"><div class="date-box"><span class="date">28</span></div></td>
            <td class="disable"><div class="date-box"><span class="date">29</span></div></td>
            <td class="disable"><div class="date-box"><span class="date">30</span></div></td>
            <td class="disable"><div class="date-box"><span class="date">31</span></div></td>
            <td class="last"><div class="date-box"><span class="date">1</span></div></td>
        </tr>

       <tr class="cldr-row-date">
        
            <td>
            <div class="date-box"><span class="date">2</span>
            
            <span class="color-lines">
            <img src="assets/images/icons/color-line/blue.png" alt="yellow"/>
            <img src="assets/images/icons/color-line/green.png" alt="green"/>
            <img src="assets/images/icons/color-line/green.png" alt="green"/>
            <img src="assets/images/icons/color-line/green.png" alt="green"/>
            <img src="assets/images/icons/color-line/blue.png" alt="yellow"/>
            <img src="assets/images/icons/color-line/red.png" alt="red"/>
            <img src="assets/images/icons/color-line/red.png" alt="red"/>
            <img src="assets/images/icons/color-line/blue.png" alt="yellow"/>
            <img src="assets/images/icons/color-line/green.png" alt="green"/>
            </span> 
            
            <span class="bell">bell</span> 
            <span class="calsnap">snap</span>
            </div>
            </td>

Here is my script for converting html2canvas:

var html2obj = html2canvas($('table'));
var queue = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();
$('#calendar_to_canvas').attr('src', img);

PFA screenshot

Thanks,
Bala

[niklasvh]

You are missing the preload of images, which itself is asynchronous, so you'll need to wrap it in callbacks. You are probably using an older version as well, so I'd recommend getting the latest version from https://github.com/niklasvh/html2canvas/downloads and then testing with:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

[gitbala]

Thanks for the quick response, i downloaded the latest version and tried the above code, its still not showing up image tag in the rendered canvas. Am i missing something, i added html2canvas.js, jquery.plugin.html2canvas and using jquery 1.7. Your help is greatly appreciated.

[niklasvh]

Are the images hosted under same origin as the page you are rendering?

Set logging: true and check what the console is saying about the images, are they failing?

[gitbala]

Images are loading perfect, please see logs below:

html2canvas: Preload starts: finding background-images html2canvas.js:27
html2canvas: start: images: 1 / 1 (failed: 0) html2canvas.js:27
html2canvas: start: images: 2 / 2 (failed: 0) html2canvas.js:27
html2canvas: start: images: 3 / 3 (failed: 0) html2canvas.js:27
html2canvas: start: images: 4 / 4 (failed: 0) html2canvas.js:27
html2canvas: start: images: 5 / 5 (failed: 0) html2canvas.js:27
html2canvas: start: images: 6 / 6 (failed: 0) html2canvas.js:27
html2canvas: start: images: 7 / 7 (failed: 0) html2canvas.js:27
html2canvas: Preload: Finding images html2canvas.js:27
html2canvas: Preload: Done. html2canvas.js:27
html2canvas: start: images: 8 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 9 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 10 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 11 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 12 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 13 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 14 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 15 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 16 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 17 / 18 (failed: 0) html2canvas.js:27
html2canvas: start: images: 18 / 18 (failed: 0) html2canvas.js:27
Finished loading images: # 18 (failed: 0) html2canvas.js:27

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

html2canvas: Renderer: Canvas renderer done - returning canvas obj

[gitbala]

The javascript file and the image are located in the same directory addition to the previous comment.

[gitbala]

Hi niklasvh, it worked perfect its same original policy issue, i resolved running in websever previously running locally using file:// this is seen as a cross domain issue. Thanks for guiding me in the right direction. This is great plugin :)

[gitbala]

Niklashvh i'm trying to do this for android hybrid app, which runs locally using file:// can you guide me resolving this cross domain issue or any suggestions much appreciated.

[niklasvh]

If you don't need to export the image anywhere, you can always set allowTaint: true

[gitbala]

We are exporting image to memory and sending it as pdf in email

[jgab-net]

I have the same problem, the log is as follows:

html2canvas: Preload starts: finding html2canvas.js background-images: 21
html2canvas: Preload: Finding images html2canvas.js: 21
html2canvas: Preload: Done. html2canvas.js 21
html2canvas: start: images: 1/2 (failed: 0) html2canvas.js: 21
html2canvas: start: images: 2/2 (failed: 0) html2canvas.js: 21
Finished loading images: # 2 (failed: 0) html2canvas.js: 21
html2canvas: Renderer: Canvas renderer done - returning obj canvas

the images are located in the background-image, just load the main image div, inmates are not shown.

Not a problem because the images cross are in the same domain.

Any idea?

[jgab-net]

if I add "background-size: cover;" to the style, the image does not appear ...

apparently this is the problem

[jgab-net]

and it worked!!, only I have to put "background-size: 100% 100%;" instead of "background-size: cover;"

[Elgamal10]

HTML@Canvas don't capture when using online url with img, what is solution for this problem ?
thanks

[brcontainer]

@Elgamal10 use proxy

https://github.com/brcontainer/html2canvas-php-proxy (html2canvas proxy with php)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (html2canvas proxy with asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (html2canvas proxy with asp.net - csharp)

Note: Read file README.md

[Elgamal10]

thanks for your reply , it's take screen shoot good but there is errors like:

html2canvas_5 is not defined
html2canvas_0 is not defined
html2canvas_5 is not defined
html2canvas_4 is not defined
html2canvas_1 is not defined
html2canvas_5 is not defined

[brcontainer]

@Elgamal10 create an issue in the project
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

I believe you use C# (ASP.NET), am I right?

[himakshi89]

Hi Niklas ,

I have started using your api and it's great.. But i am stuck can you please help..

I am trying to convert an html to canvas using the code:
jQuery('html').html2canvas({
proxy:"http://localhost/myproject/proxy.jsp",
userCORS:true,
onrendered : function(canvas) {
alert(canvas);
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
},
});

Now i have a file called proxy.jsp that saves the all the cross origin images in the path ~/tomcat/myproject/images/"

After that i see this in console
Resource interpreted as Script but transferred with MIME type image/jpeg: "http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi…QYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback=html2canvas_64". html2canvas.js:2264

After all this, my callback function is not executed and i cannot create a canvas..

What can be done? Can you please help?

Many Thanks

[brcontainer]

@himakshi89 you can not use the proxy: and userCORS: at the same time.

Prefer to use proxy.
Note: try to capture the body.

in your code has a comma left:

},//this is wrong.

});

What version of your html2canvas?

Try this:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

If not work try downloading the html2canvas this https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js and use this code:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

[himakshi89]

@brcontainer
Hi

I have modified my code and now i am sending the response from proxy.jsp as
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})

No errors are shown in the console now.
But nothing happens now.. What should be happening or is there any place that need to be changed?

Please help

[brcontainer]

But as the console can not show anything
you used my second sample code? it sends logs to the console.

Try to provide your code online way to test.

[himakshi89]

As suggested i removed the useCORS and replace html with body

jQuery('body').html2canvas({
proxy:"http://nisquare.dyndns.org:8087/facebook/proxy.jsp",
logging:true,
onrendered : function(canvas) {
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

I am also receiving this is my console
html2canvas: Error loading :http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21

I have attached a screenshot of what i am getting

[brcontainer]

You tried download https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

and this code:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

or not?

NOTE: http://nisquare.dyndns.org:8087/facebook/proxy.jsp is broken!

[himakshi89]

I had downloaded the latest version

I replace the code with the following

html2canvas($("body").get(0), {
proxy:"http://nisquare.dyndns.org:8087/facebook/proxy.jsp",
logging:true,
onrendered : function(canvas) {
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

[brcontainer]

send me the link test

[himakshi89]

I am using this is chrome extension and the extension is still in development mode

[brcontainer]

"Chrome extension" with JSP ?

[himakshi89]

the jsp is being used only for the proxy part..According to you what is more preferable?

[brcontainer]

Chrome-extension run in other "protocol" and "frame", proxy.jsp uses the HTTP protocol.

I believe chrome-extensions do not require proxy. Use like:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

READ: http://developer.chrome.com/extensions/tut_debugging.html

[himakshi89]

@brcontainer
Hey thanks for the idea.. we are now using an api provided by chrome itself. It has a function chrome capturevisibletab that solves or problem very easily :)

[codeofsumit]

@jgab-net thank you so much. Searched way too long for the error

[jgab-net]

@sumit8 (Y) you're welcome

[usmonster]

@gitbala Is your issue resolved? @niklasvh Can this issue be closed? (I'll stop with the bug triage if this is annoying.. :)

[niklasvh]

@usmonster by all means continue, saves me some time to look through each and every open issue :)

[gitbala]

Yes its resolved :)

On Mon, Sep 1, 2014 at 4:11 AM, usmonster notifications@github.com wrote:

@gitbala https://github.com/gitbala Is your issue resolved? @niklasvh
https://github.com/niklasvh Can this issue be closed? (I'll stop with
the bug triage is this is annoying.. :)

—
Reply to this email directly or view it on GitHub
#145 (comment)
.

[shalini-github]

Im using the html2canvas - local image not rendering in pdf. whats the solution for this?

[shalini-github]

@niklasvh pls help - the logo image in html is not rendering in pdf

[qiuyaofan]

I failed when convert inline image.how to use "proxy": "http://localhost/myproject/proxy.jsp", I use vue ,where to put this jsp and i don't know how to use @niklasvh can you help?

[NikhilRadadiya]

@qiuyaofan having same issue did you get the solution? I'm using it with angular2 and getting Images from Other Server. @gitbala did you get the solution?

[maghidini]

+1 BTW the logs looks good (html2canvas: Images loaded, starting parsing) but I still don't see the images on the pdf.

[pablocuca]

Im using

allowTaint: true,
useCORS: true,
taintTest: false,

[creepteed]

@NikhilRadadiya @qiuyaofan guys, also been looking for a just client side solution. Using vue js and getting image from a giphy. So here is the one worked well for me:

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

So no proxy been used.

[NikhilRadadiya]

@creepteed I have others element which I need to convert to canvas and then save to pdf, my html doesn't contain only images, if this is the case then how can I use above function you have posted?

[vishal-px]

Hi @niklasvh ,
I want to capture webpage using htmltocanvas all is working fine but when i am trying to capture webpage then i not getting images.
Can you help me?
Here is my code :
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

In console, I getting this
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
Thanks.