Struggling to use the html2canvas-proxy for cross origin screenshots. As far as I understand, passing the url as a parameter(localhost:xxxx?url=https://...) returns the image screenshot data as a base 64 string (check blob).
This works only if the url parameter is an image source. On using any other url and using the same as an image source, I just get the alt text.
For example the proxy works with https://placebear.com/200/300 but fails to work with https://google.com as the url parameter.
Any help would be much appreciated
The html2canvas-proxy is only intended for use in combination with the html2canvas library itself. It's a NodeJS server with CORS enabled so that html2canvas can send the cross-domain image URLs to and receive the corresponding base64 data URL for processing in the canvases.
It doesn't work as a server that takes in a website URL and returns a screenshot of that website.
Related
Using a TWebBrowser in Delphi, I'm showing a website that uses JSON to update its content. To get the source code of the newly updated content and load it into a Memo, I believe I have to get the URLs of the GET requests. Unfortunately, these are always different and generated with an encrypted Javascript. Is there any way to list the URLs the GET requests go to in a similar way like FireBug does in its console view?
Thanks a bunch!!!
this may be a stupid question.. but i decided to give it a try here...
i am developing a web application using AJAX to do the interactions between client and server(python/django).
now in the client page, there is a canvas which contains a dynamically generated image; i want to get this image and send this image to server, however, i can't use Canvas.toDataURL() due to the violation of canvas security rule (client and server must be in same domain in this case).
so I am just wondering whether it's possible to get the canvas element and send its HTML back to server, then let server process it and extract its image data?
appreciate any advice!
The only problem if the <canvas> date is tained by using images from different origins (CORS problem).
Just
Use toDataURL() to get the image data
Post this data to the server using normal AJAX
Strip off data URL prefix
base64 decode the data
Now you have image data in binary format
Do whatever you wish with the image
base64 + dataURL decode example: https://github.com/miohtama/Krusovice/blob/master/bin/create_bg_thumbnails.py#L62
now i'm making application for facebook with javascript.but I don't know method to change my screen application to .jpg file.
So,I would like to know how to change my application and post it
Thank you for your help.
You cannot get the screenshot done client side, however you can grab the HTML code of the page being viewed and AJAX it up to your server, have your server component transform that HTML into an image.
Use this to get the HTML content of the page at the moment they want the screen capture document.getElementsByTagName('html')[0].innerHTML;
AJAX the HTML to your server
Have your server transform that HTML into an image (depending upon server-side technology you're using, there are solutions to this) (eg http://www.converthtmltoimage.com/)
two choice, store the image on your server to be the permanent place sending back the new URL for the image, or send the content back to the client.
Have the client HTTP Post the image content to Facebook for the post, or reference the URL
It's a big project, but I commend you for tackling something like this.
I've found the page that plain http images with a https/ssl page can't be displayed without warnings. Are there any way to display a picture from another http:// web-site on your https://web-site without warnings? (suppose you have a permission to display that picture on you web-site).
Chrome put a yellow triangle on SSL locker: "...However, this page includes other resources, that are not secure..."
IE displays a warning when a page loads: "Do you want to view only the webpage content that was delivered securely?"
So, how to display a picture on https:// page if it is on another web-server?
You can use the information on this article on Encosia. Basically you have to use a // syntax for your urls in order to use the same protocol in all cases. For example, if you have a https request, the following
//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
will hit google's CDN using the https protocol. However, if you don't have control over the other server, i think you're out of luck. If you do have control over the other server i'd recommend using the method described in the article above by allowing your content server to serve both protocols.
I have this URL: www.example.com/yyy.gif at my site.
It is actually NOT a direct link to the image but a HTML page containing the image (direct url to said image is www.example.com/files/yyy.gif). I want to keep it that way.
THE PROBLEM
When the link (www.example.com/yyy.gif) is posted somewhere (forums, comments at various websites) it is quite common that their script assumes it is a direct link to an image and tries to display it as an image (<image src="www.example.com/yyy.gif">) which leads to broken image on their site.
THE QUESTION
Is there a way to detect these cases and automatically reroute them to the direct image URL? Keep in mind that visitors should be able to open the original URL without being redirected.
You could check the $_SERVER['HTTP_REFERER'] variable to see if the url originates from your site.
If it doesn't, output some headers for the image and then the image itself instead of what you would normally do.
I think I got it!
So I checked what request headers are generated when the same URL is accessed by clinking on a link and when it is loaded using the <img> tag.
The only parameter that differs is "Accept". When the URL was accessed by <img> it was */* (Chrome, IE, Safari) or image/png,image/*;q=0.8,*/*;q=0.5 (FF).
But when accessed by clicking on a link (or just opening the URL directly), it is something like this text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
So I'm checking for 'text/html' in my script before outputting any content. If it is present, I output the html version; otherwise go for the image directly.
And it seems to be working exactly as I wanted (yay!).
Could there be any pitfalls that I should be aware of?