currently I am making a download button on my page via html2canvas, which I successfully got working. But now I want to add a watermark to it before I download it. After a quick google search the watermarkjs library popup, which adds a watermark to image, but I want to add it to a dataURL or canvas before I transform it. Is there a way to do it?
My not functional code:
var watermarkImage = "https://pravdaovode.cz/wp-content/uploads/2018/07/vodoznak.png";
function getScreen() {
html2canvas(div_box).then(function(canvas) {
if ('msToBlob' in canvas) {
var blob = canvas.msToBlob();
navigator.msSaveBlob(blob, 'pravda_o_vode_cenova_mapa.jpg');
}
else {
var a = document.createElement('a');
a.setAttribute('href', watermark([canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"), watermarkImage]));
a.setAttribute('target', '_blank');
a.setAttribute('download', 'pravda_o_vode_cenova_mapa.jpg');
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
});
}
Related
I create a jpeg file over canvas. The image is downloaded and has the name "Download" without file extension. How can I modify the file name for the download via the script?
html2canvas(document.getElementById("rankingTable")).then(function (canvas) {
var image = canvas.toDataURL("image/png", 1)
.replace("image/png", "image/octet-stream");
window.location.href=image;
});
Specify the filename in the download attribute:
function downloadData(linkData, filename) {
let link = document.createElement('a');
link.href = linkData;
link.download = filename;
let target = document.body;
target.appendChild(link); // Firefox requires the link to be in the body
link.click(); // simulate click
target.removeChild(link); // remove the link when done
}
Doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
I am not sure you need to replace the "image/png" with "image/octet-stream", so try this code:
html2canvas(document.getElementById("rankingTable")).then(function (canvas) {
var image = canvas.toDataURL("image/png", 1);
downloadData(image, "ranking-table.png");
});
here is the copy of my downloaded file
I am trying to download the image using html5canvas, but the issue is it is downloading the file without text.
Here is the snippet of code I am implementing
<script>
function downloadImage(element = document.body, filename = 'file.png')
{html2canvas(element, {
useCORS: true,
}).then((canvas) => {
const a = document.createElement('a');
a.download = filename;
a.href = canvas.toDataURL('image/png');
a.click();
});
}
</script>
you have mentioned you are using html5canvas but you have applied html2canvas.
Do check it once.
I'm trying to save the elements i'm creating with svg.js as a .svg file automatically after they are created. The library has the svg() method to export SVG but I haven't found examples to learn how to use it. For example, if I want to save the rect I create in the code below, how could I do it?
html:
<!DOCTYPE html>
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
</body>
</html>
js:
var draw = SVG().addTo('body').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });
On http://svgjs.dev there is a searchbar where you can just search for export and you will find what you are looking for:
Exporting the full generated SVG, or a part of it, can be done with the svg() method:
draw.svg()
Exporting works on individual elements as well:
var rect = draw.rect()
var svg = rect.svg()
Now you have generated a string containing your svg. To download this string as a file (creating a file), a quick google search gives you a nice solution:
function downloadString(text, fileType, fileName) {
var blob = new Blob([text], { type: fileType });
var a = document.createElement('a');
a.download = fileName;
a.href = URL.createObjectURL(blob);
a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
a.style.display = "none";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
}
// downloadString("a,b,c\n1,2,3", "text/csv", "myCSV.csv")
I'm using HTML2Canvas to convert a table to canvas and then I try to download the image using a download button. My code is as below:
$("input[alt='save-image']").click(function() {
html2canvas($("table"), {
onrendered: function(canvas) {
this.href = canvas.toDataURL();
this.download = "mypainting.png";
}
});
});
The table converts to image; however, the image never downloads. Please let me know if I'm doing anything wrong or if you would like to know more information.
You can download image like this -
html2canvas($('table').get(0)).then( function (canvas) {
// document.body.appendChild(canvas);//
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
//a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.download = 'mypainting.png';
a.click();
});
I made it to work, thanks to T.Shah, and here is my final code:
$("input[alt='save-image']").click(function() {
html2canvas($("table").get(0), {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'Pixel-Drawing.png';
a.click();
}
});
});
This function works great in three.js for saving a canvas image as a JPG snapshot. A few issues though. The image doesn't save with any exif data, no colorspace ect so browsers treat the image colors randomly when uploaded, it often looks very desaturated when uploaded to the web. Is there an easy way to add the exif data to the .jpg image when saving it to add the color profile sRGB IEC61966-2.1? Also, for some reason this doesn't work at all in IE? Throws the error uri is undefined, which it is. Can't figure out what uri should be. Thanks for any help!
function saveAsImage() {
var imgData, imgNode;
try {
var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);
saveFile(imgData.replace(strMime, "image.jpg");
} catch (e) {
alert(e);
console.log(e);
return;
}
}
var saveFile = function (strData, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
document.body.appendChild(link); //Firefox requires the link to be in the body
link.download = filename;
link.href = strData;
link.click();
document.body.removeChild(link); //remove the link when done
} else {
location.replace(uri);
}
}