Develop Reference

html2canvas saving canvas images with extension

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

Execute JS code after the photo has started downloading with ht

I am using html2canvas and Canvas2Image in order to get a screenshot of a map on my screen.
The functionality is running on a button click like this:
$(document).ready(function() {
$("#screenshot2").click(function(){
html2canvas($("#OpenLayers_Map_15_OpenLayers_ViewPort"), {
useCORS: true,
onrendered: function(canvas) {
theCanvas = canvas;
// Convert and downloadimg-out as image
Canvas2Image.saveAsPNG(canvas);
}
});
});
});
What I want is to have a loading sign while the process is running. It's easy to initiate the "loading image" on button click, but I haven't figured out how to stop it. For example, in Ajax, there are the beforeSend and afterSend. Is there something equivalent in this case?

youtube <video> element always comes up empty in firefox contentscript

main.js
highLevelTab.attach({
contentScriptFile: "./yt-controls.js"
});
/data/yt-controls.js
window.addEventListener("load", function(e) {
var video = window.document.getElementsByTagName("video");
console.log(video);
});
video comes up as {"0":{}}. Do I need to inject this into the page script in order to get the actual values?

Turns out you can use unsafeWindow in firefox to access the page as it is, after all scripts on the page have messed with it, as detailed here. So,
window.addEventListener("load", function(e) {
var video = unsafeWindow.document.getElementsByTagName("video");
console.log(video);
});

Saving a screenshot to Server using JQuery and ASP.NET

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" />

Jquery and canvas code not working on same external file

I have been mucking about with a little bit coding using jquery and canvas (not together).
I have an external javascript file and in it contains;
$(document).ready(function() {
/*
NAME CHOOSER
*/
var carl = ['Sha', 'Shads', 'Cai', 'Moon', 'Sun', 'Staffy',];
var rosie = ['Mum',];
var prev;
$('button').click(function() {
prev = $('h2').text();
$('h2').empty().text(carl[Math.floor(Math.random() * carl.length)] + rosie[Math.floor(Math.random() * rosie.length)]).after('<p>' + prev + '</p>');
});
});
I also have some inline javascript which is for the canvas element;
<script>
var canvas = document.getElementById('draw');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 800, 500);
}
</script>
When separated by using inline javascript for the canvas and an external file for the jquery everything works fine and as expected.
When adding the inline canvas javascript to the external file the canvas element is not working but the jquery is. The javascript is loaded after the canvas element as my external javascript is linked just before the closing body tag and furthermore if I remove all jquery from the external file the canvas element begins to work again.
Why is this?
Thanks
EDIT
I have also now tried putting the canvas code inside jquerys document ready function and outside of it and it is still not working. I have wrapped the canvas code in an anonymous function still to no avail and have even tried selecting the canvas element with jquery itself like below;
var canvas = $('canvas')[0];
But it still doesn't want to know. Putting the canvas code before all the jquery then the canvas code executes but the jquery doesn't, I really am baffled! It doesn't bother me keeping it seperate but I would like to know why it is happening.
Thanks again.

This simple problems could be noted if you use the Browser Console. That's it! You can open the console pressing Ctrl+Shift+J:
In home page:
Error: Uncaught ReferenceError: $ is not defined
Solution: Link jQuery in your source
In namechooser page:
Error: Uncaught TypeError: Cannot read property 'getContext' of null
The problem:
You are trying to manipulate a div as it was a canvas, and you can't get the context of a div element. So this is your HTML:
<div id="wrap">
<h1>PORTFOLIO PROJECT :)</h1>
<button>Click here to generate a company name!</button>
</div>
Solution:
Change <div> for <canvas>
How to avoid future problems like this?
Use the browser console, that's it!

Ok, if I combine the code you have, above, it should look something like this: (see my jsFiddle for full context : http://jsfiddle.net/mori57/TqamB/ )
$(document).ready(function () {
/*
NAME CHOOSER
*/
var carl = ['Sha', 'Shads', 'Cai', 'Moon', 'Sun', 'Staffy'];
var rosie = ['Mum'];
var prev;
$('button').click(function () {
prev = $('h2').text();
$('h2').empty().text(carl[Math.floor(Math.random() * carl.length)] + rosie[Math.floor(Math.random() * rosie.length)]).after('<p>' + prev + '</p>');
});
var canvas = document.getElementById('draw');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 800, 500);
}
});
And, running within the context of jsFiddle, this works perfectly.
So, either you're not combining the two scripts properly (putting the canvas outside the document-ready block, for example, or somehow missing a closing brace), or there's something else amiss in your script file or markup.