Essentially what I want to do is save a screenshot of a web page to a server and NOT on a client's machine.
I have used html2canvas to save a div to a local directory, and can I have also managed to save a canvas tag to a server, however I want to be able to save a div tag server-side.
The following allows the ability to save server side by using a Handler.
$(function () {
$("#add_button").click(function () {
var image = document.getElementById("myCanvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.get("Handler.ashx", { imageData: image }, function (data) {
alert("Saved!");
});
});
});
The following creates a screenshot image of the form tag and saves it locally.
<script type="text/javascript">
$("#btnSave").click(function () {
html2canvas($("#form1"), {
onrendered: function (canvas) {
//theCanvas = canvas;
//document.body.appendChild(canvas);
canvas.toBlob(function (blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
</script>
Basically, I want to save a screenshot image of a "form" tag to the server.
Here is Code that you can print the page as PDF using javascript
<asp:Button ID="imgBtnPrint" OnClientClick="javascript:window.print();" runat="Server" Text="Print" />
Related
I have a web page with button onclick on that button a screenshot of this page should be taken and downloaded with (.jpg) extension.
to do that I use the following code:
$("#Finish").on('click', function () {
// take a screenshot and save it.
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
DownloadImage();
}
});
});
function DownloadImage() {
var imageData = getCanvas.toDataURL("image/png");
var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
window.open(newData);
}
when i click the button:
As you see I have image with "download" Name without any extension.
I need to download the image with specific name and extension for example "myImage.jpg"
If you can change the button into a <a> tag, you should be able to use the download attribute.
$('#image-link').attr('href', 'data:image/png;base64,<data>").attr('download', 'filename.png');
Haven't played around with it too much myself but it is said to work in Firefox, Chrome and Edge: https://caniuse.com/#feat=download
I am using html2canvas for capture a screenshot of particular div, it works fine but not caprturing the images in that div
My Script code is below:
<script type="text/javascript">
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
logging: true,
allowTaint: true,
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/,"data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "design.png").attr("href", newData);
});
Here is the link of live problem tht i am facing, check that by click on preview button appearing on the page scroll down a little bit
https://www.citystatebeads.com/pages/example-page
Straight from the README on html2canvas:
It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.
Since your image is located on https://cdn.shopify.com and your origin is https://www.citystatebeads.com, it's not going to render the image.
How to take screenshot of a DIV which contain more than one images? Actually I am dragging images into DIV and want to take screenshot using Jquery or Javascript but without using server side scripting language.
Assuming you have a button to click (to trigger the capture), and that the images are on the same domain, load the html2canvas JS file, then add this:
$('#btn').click(function() {
html2canvas($('#DIV'), {
onrendered: function(canvas) {
//do something with the canvas element - upload, append to a display element, etc. For example:
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
I have a few camera that uploading images trougth FTP connection.
I whould like to show the latest image with javascript, but I don't want to see white screens while the next image is loading.
I have this code:
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
var $img = $('#image1');
setInterval(function() {
$.get('https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>&t='+ new Date().getTime(), function(data) {
var $loader = $(document.createElement('img'));
$loader.one('load', function() {
$img.attr('src', $loader.attr('src'));
});
$loader.attr('src', data);
if($loader.complete) {
$loader.trigger('load');
}
});
}, 5000);
});
</script>
<div id="load">
<img id="image1" src="https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>" alt="kamerakep"/></div>
My problem is: The image is not showing at refresh. The refreshing response appears as such:
ÿØÿàJFIFÿÛC
%# , #&')*)-0-(0%()(ÿÛC
(((((((((((((((((((((((((((((((((((((((((((((((((((ÿÀÐ"ÿÄ
ÿĵ}!1AQa"q2¡#B±ÁRÑð$3br
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ
ÿĵw!1AQaq"2B¡±Á #3RðbrÑ
$4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÝÿÚ? uÝG?ññÿ/øQý»¨ÿÏÏþ8¿á]ÂBæßÅPYÃ&Ëk½ÞrmvÔr¼éGÅmBæãÅsÙÍ.ëkM¾Jmfèз8ÉÉõ®e^cÙÇçÿ·u/ùøÿÇü(ö¥ÿ?<¸¿á^¥ý¿©ÿªþØûOüLç·¿óßgÝÆ>ï+/\ÿç¸5S÷ú;¼¹¾î38Sò®ÝtªtcÓ×aû
I dont know what is this. It gives me code 200, but no new image. First time the image is showing...
I suspect your image is in binary format, which cannot be used as value in "src", what you should do is using it in base64.
Here an example: Embedding Base64 Images
Plan B is to update just the link, but as you said probably the browser won't show an image during the fetching process.
I have the answer. This jquery script needs to get the URL of the next image not the image source.
So basically, I am using a simple library called HTML2Canvas
This is my current code working great and is being called from an onclick event from a button:
function saveForm()
{
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
Basically, all it does is take a screen shot and append it to the bottom of the page.
There was already a question similar to this, although the answer did not work and the download is always a corrupt jpg file:
html2canvas saving as a jpeg without opening in browser
Would there be a way to force a download within this function instead of appending it to the bottom of the page?
Use canvas.toDataURL to get the canvas content as an image src
open a window/popup
add an <img> to the popup
assign the image src as src for the image
function saveForm() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var open = window.open('','','width=500,height=500')
open.document.write('<img id="img" style="width="400">');
open.document.getElementById('img').setAttribute('src', img);
}
});
}
Tested the code inside onrendered, and it works for sure - but not along with html2canvas.
If you right click on the image in the popup -> save image as, the saved image is valid.
The reason why I am using setAttribute and not simply src="..." is that if you assign the data src as string the image get corrupted.
Edit
I know :( I think you have to set HTTP Headers to force a download, and this can only be done by the server (correct me if I am wrong). I think of a "proxy" on the server like this mockup, download.php :
<?
$src=$_POST['src'];
header('Content-Type: image/png');
header('Content-Disposition: inline; filename="download.png"');
header('Content-Length: '.count($src));
echo $src;
?>
and call it by
var img = canvas.toDataURL("image/png");
window.open('download.php?src='+img);
But then you will face a lot of Request-URI Too Large-messages, unless all your canvas-images is in icon-size.
A second way - and probably the one that would work - would be to save img in a table on the server through ajax, eg calling a script with img src that saves it. When this call is finished, you could call another server script with the correct headers for image download, including the img src saved just before. But this is a more extensive approach you could try yourself..?
Here is a solution that builds on the accepted one to enable a download button without server-side code using jQuery.
https://codepen.io/nathansouza/pen/OXdJbo
function download(url){
var a = $("<a style='display:none' id='js-downloder'>")
.attr("href", url)
.attr("download", "test.png")
.appendTo("body");
a[0].click();
a.remove();
}
function saveCapture(element) {
html2canvas(element).then(function(canvas) {
download(canvas.toDataURL("image/png"));
})
}
$('#btnDownload').click(function(){
var element = document.querySelector("#capture");
saveCapture(element)
})