I use librairies javascript (jspdf.js and html2canvas.js) to convert my html page (elements div and svg) to a PDF. But the export doesn't include all DIV elements.
function svg_to_pdf(svg, callback) {
svgAsDataUri(svg, {}, function(svg_uri) {
var image = document.createElement('img');
image.src = svg_uri;
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var doc = new jsPDF('portrait', 'pt');
var dataUrl;
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
dataUrl = canvas.toDataURL('image/jpeg');
doc.addImage(dataUrl, 'JPEG', 0, 0, 600, 400);
callback(doc);
}
});
}
function download_pdf(name, dataUriString) {
var link = document.createElement('a');
link.addEventListener('click', function(ev) {
link.href = dataUriString;
link.download = name;
document.body.removeChild(link);
}, false);
document.body.appendChild(link);
link.click();
}
Related
I use "dom-to-image" to convert html table to png:
var wrapper = document.getElementById('exportContent');
domtoimage.toSvg(wrapper).then(function (svgDataUrl) {
downloadPNGFromAnyImageSrc(svgDataUrl);
});
function downloadPNGFromAnyImageSrc(src)
{
var img = new Image;
img.onload = function(){
var canvas = convertImageToCanvas(img);
var pngImage = convertCanvasToImage(canvas);
var anchor = document.createElement('a');
anchor.setAttribute('href', pngImage.src);
anchor.setAttribute('download', 'image.png');
anchor.click();
};
img.src = src;
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png", 1.0);
return image;
}
}
It converts the element to png. However I need to put it into doc file.
Now I need to generate/save a docx file with this png without saving png.
How can I do it?
I followed this post: dom to img
I am trying to program a camera website. The stream seems to work, and I can see the canvas captures its image when it was drawn, but it seems I have a problem when it comes to changing it into an image and then downloading it. SOS
function capture() {
var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 140, 0, video.videoWidth, video.videoHeight);
var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;
Replace your code with the following, noting that 'capture.png' need to be replaced with actual file name you want to save file as. 'image/png' with mime type, and that toBlob function has a third quality parameter for when mimeType is image/jpeg or image/webp.
var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 140, 0, video.videoWidth, video.videoHeight);
var blob = canvas.toBlob(function (blob) {
var anchor = document.createElement('a');
anchor.style.display = 'none';
document.body.appendChild(anchor);
var url = window.URL.createObjectURL(blob);
anchor.href = url;
anchor.download = 'capture.png';
anchor.click();
window.setTimeout(() => {
window.URL.revokeObjectURL(url);
document.body.removeChild(anchor);
}, 100);
}, 'image/png');
I am trying to capture an svg. I used canvg to convert svg to canvas. but when printing I get solid black image.
I have tried many suggestions I found but no luck so far.
vm.printDiagram = function() {
var fileName="Diagram.pdf";
var svgElements = $("#eleDiagram").find('svg');
svgElements.each(function() {
var canvas, xml;
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
var ctx = canvas.getContext('2d');
ctx.fillText(255,255,255);
//ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
xml = (new XMLSerializer()).serializeToString(this);
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
//draw the SVG onto a canvas
canvg(canvas, xml);
$(canvas).insertAfter(this);
$(this).attr('class', 'tempHide');
$(this).hide();
});
html2canvas($("#eleDiagram"), {
background :'#FFFFFF',
onrendered: function(canvas){
var image = new Image();
image.src = canvas.toDataURL("image/png");
var fullQuality= canvas.toDataURL('image/png', 1.0);
var dwidth=$("#eleDiagram").width();
var dheight=$("#eleDiagram").height();
var _postPdfData = {
"images":[
{
"data":fullQuality,
"width":dwidth,
"height": dheight
}
]
};
_postPdfData = JSON.parse(angular.toJson(_postPdfData));
var pdfUrl = "service/printpdf";
$http.post(pdfUrl,_postPdfData,{responseType:'arraybuffer'}).then(function onSuccess(response) {
if (response.data) {
var file = new Blob([response.data], {type: 'application/pdf'});
var fileURL = window.URL.createObjectURL(file);
if(response && response.data){
var a = document.createElement("a");
document.body.appendChild(a);
a.href = fileURL;
a.download = fileName;
a.click();
}
}
});
}
});
$("#eleDiagram").find('.screenShotTempCanvas').remove();
$("#eleDiagram").find('.tempHide').show().removeClass('tempHide');
};
I am trying to get base64 data from image url but it always return "data:"
Here's the code :
function getBase64Image(imgurl) {
var canvas = document.createElement("canvas");
var img = new Image();
img.src = imgurl;
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Use img.onload to execute the code after your image has loaded. Use a callback function to report back the dataURL.
function getBase64Image(imgurl, callback) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
if (typeof callback === 'function') {
callback(dataUrl);
}
};
img.src = imgurl;
}
In my application i have added the code to convert the image into base 64 with a resized images.When i try the following code the image part has been cropped.
function getBase64FromImageUrl(URL)
{
var img = new Image();
img.style.width = this.width,
img.style.height = this.height,
img.src = URL;
img.onload = function ()
{
var canvas = document.createElement("canvas");
canvas.width =150
canvas.height =150;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 10, 10);
var dataURL = canvas.toDataURL("image/jpg");
c=dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
return c;
}
}
How to get the full image properly?What change requires in the code
function encodeImage(src, callback) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
callback(canvas.toDataURL());
}
img.src = src;
}
See this fiddle:
http://jsfiddle.net/NwaPT/3/