How to render HTML element and SVG with html2canvas? It's not working.
My code:
$(function() {
window.takeScreenShot = function() {
html2canvas($('#centerpanel'), {
onrendered: function(canvas) {
var svg = document.getElementById("centerpanel");
var serializer = new XMLSerializer();
var ser = serializer.serializeToString(svg);
var context = canvas.getContext('2d');
context.fillStyle = '#8cb4cd';
context.font = '200px sans-serif';
context.globalCompositeOperation = 'lighter';
x = 150;
y = 100;
context.translate(x, y);
context.rotate(-Math.PI / 4.5);
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('123456', 300, 480);
context.restore();
var base64image = canvas.toDataURL("image/png");
console.log(base64image);
var image = new Image();
image.src = base64image;
var w = window.open("");
w.document.write(image.outerHTML + ser);
},
});
}
});
The above code shows both HTML and SVG, but the result is not valid as shown in Figure 1. But I want the results shown in Figure 2.
How do I edit the code to display the desired effect?
Figure 1
Figure 2
Related
I try to render diagram from xml to svg,then svg to draw in canvas and save at the computer.
Canvas.toDataUrl() SecurityError in ie 11,but for google chrome is fine.
How did resolve this problem
It the same with this ,but it not help me
this my file for rendering diagram
Please,help me.
I have this function
$('#exportBtn').click(function () {
var object = new Object();
object.xml=xml;
render(object)
var svg = document.querySelector("svg");
var img = document.createElement("img");
var canvas = document.createElement("canvas");
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width * 3;
canvas.height = svgSize.height * 3;
canvas.style.width = svgSize.width;
canvas.style.height = svgSize.height;
var svgData = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(svgData);
var b64Start = 'data:image/svg+xml;base64,';
var image64 = b64Start + svg64;
img.onload = function () {
var ctx = canvas.getContext("2d");
ctx.scale(3, 3);
var x0 = Math.floor(0);
var y0 = Math.floor(0);
ctx.translate(-x0, -y0);
var bg = graph.background;
if (bg == null || bg == '' || bg == mxConstants.NONE) {
bg = '#ffffff';
}
ctx.save();
ctx.fillStyle = bg;
ctx.fillRect(x0, y0, Math.ceil(svgSize.width * 3), Math.ceil(svgSize.height * 3));
ctx.restore();
ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
var canvasdata = canvas.toDataURL("image/png", 1);
var a = document.createElement("a");
a.download = "download_img" + ".png";
a.href = canvasdata;
document.body.appendChild(a);
a.click();
};
img.src = image64;
}
);
this my error
i have a canvas with the following images loaded:
Background Image:
Front Image:
Both together looks like this image:
Now i want to apply a feather effect to the hand boarders to result in to something like this:
I tried the following solution so far. But the result is not like on the above image.
var temp = document.createElement('canvas'),
tx = temp.getContext('2d');
temp.width = scope.canvas.width;
temp.height = scope.canvas.height;
tx.translate(-temp.width, 0);
tx.shadowOffsetX = temp.width;
tx.shadowOffsetY = 0;
tx.shadowColor = '#000';
tx.shadowBlur = 100;
var img = new Image();
img.onload = function() {
tx.drawImage(img, 0, 0, 512, 512);
};
img.src = imageURL; // the hand image
var temp2 = document.createElement('canvas'),
tx2 = temp2.getContext('2d');
temp2.width = scope.canvas.width;
temp2.height = scope.canvas.height;
var img2 = new Image();
img2.onload = function() {
tx2.drawImage(img2, 0, 0, 512, 512);
tx2.save();
tx2.globalCompositeOperation = 'destination-out';
tx2.drawImage(temp, 0, 0);
tx2.restore();
};
img2.src = temp.toDataURL("image/png");
Any idea how to solve this?
Regards
Steve
To feather an image, create a copy of it via a new canvas, create an invers mask of the image with destination-out comp. Then draw the hand again and then mask with destination-ou but with a shadow to create the feather.
var canvas = document.createElement("canvas");
canvas.width = 1024,canvas.height = 1024;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
var hand = new Image();
hand .src = "http://i.stack.imgur.com/PbAfc.png";
hand .onload = function(){
var can = document.createElement("canvas");
can.width = this.width;
can.height = this.height;
ct = can.getContext("2d");
// create inverted mask
ct.fillStyle = "black";
ct.fillRect(0,0,this.width,this.height);
ct.globalCompositeOperation = "destination-out";
ct.drawImage(this,0,0);
// create second canvas
var can1 = document.createElement("canvas");
can1.width = this.width;
can1.height = this.height;
ct1 = can1.getContext("2d");
// draw image
ct1.drawImage(this,0,0);
ct1.shadowColor = "black";
ct1.shadowBlur = 30; // amount of feather
ct1.globalCompositeOperation = "destination-out";
ct1.drawImage(can,0,0);
ct1.shadowBlur = 20; // amount of feather
ct1.drawImage(can,0,0); // The mor you draw the greater the FX
ct1.shadowBlur = 10; // amount of feather
ct1.drawImage(can,0,0); // The mor you draw the greater the FX
ct1.globalCompositeOperation = "source-over";
ct.globalCompositeOperation = "source-over";
ctx.drawImage(can1,0,0);
// use the new canvas can1 as the hand image in later code.
}
//ctx.fillStyle = "#e19e9e"
ctx.fillRect(0,0,1024,1024);
I want to generate some pdf page previews from a pdf in a html page. Those previews are generated correctly but not in the same order as pdf`s pages.
My code is :
var PDF_FILES_DIRECTORY = "",
PDF_FILES = ['pdf2.pdf'];
var CURRENT_FILE = {};
$.each(PDF_FILES, function (index, pdf_file) {
PDFJS.getDocument(PDF_FILES_DIRECTORY + pdf_file).then(function (pdf) {
for(idxPage = 1 ; idxPage < pdf.numPages ; idxPage++) {
pdf.getPage(idxPage).then(function (page) {
var viewport = page.getViewport(1);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).then(function () {
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var img_src = canvas.toDataURL();
var $img = $("<img>").attr("src", img_src);
var $thumb = $("<div>")
.attr("class", "thumb")
.append($img);
$thumb.appendTo("#thumbnail");
canvas.remove();
});
}); // end of getPage
}
}); // end of getDocument
}); // end of each
Thanks.
Hi guys I am trying to convert svg to canvas and download it.Here is my code :-
var h=$("#"+chartId).find('svg').height();
var w=$("#"+chartId).find('svg').width();
var canvas1 = document.createElement('canvas');
canvas1.id = "canvas1";
canvas1.width = w;
canvas1.height = h;
document.getElementById('pngcon').appendChild(canvas1);
var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector('svg'));
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var canvasdata;
var image = new Image;
image.src = imgsrc;
window.open(imgsrc);
image.onload = function() {
context.drawImage(image, 0, 0);
var data = context.getImageData(0, 0,w , h);
var compositeOperation = context.globalCompositeOperation;
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,w,h);
data = canvas.toDataURL("image/png",1.0);
canvasdata = data;
var a = document.createElement("a");
a.id="imagepng"
a.download = chartname+".png";
a.href = canvasdata;
document.body.appendChild(a);
document.getElementById("imagepng").click();
$("#pngcon").html('');
$("#imagepng").remove();
};
Everything works fine when svg doesn't have viewbox attribute set, like this
<svg id="svg_chart2">
......
......
</svg>
But when i add viewbox attribute in svg, the program stops working,like follows:
<svg viewBox="0 0 651 348 " id="svg_chart2">
......
......
</svg>
Please help...
I found out I cannot do that (adding text IN a picture) with HTML , I found a way with JAVA but I am intresting in finding a way by using Javascript.
You can do it using canvas,
<canvas id="canvas" width="340" height="340"></canvas>
Script,
function addTextToImage(imagePath, text) {
var circle_canvas = document.getElementById("canvas");
var context = circle_canvas.getContext("2d");
// Draw Image function
var img = new Image();
img.src = imagePath;
img.onload = function () {
context.drawImage(img, 0, 0);
context.lineWidth = 1;
context.fillStyle = "#CC00FF";
context.lineStyle = "#ffff00";
context.font = "18px sans-serif";
context.fillText(text, 50, 50);
};
}
addTextToImage("http://www.gravatar.com/avatar/0c7c99dec43bb0062494520e57f0b9ae?s=256&d=identicon&r=PG", "Your text");
http://jsfiddle.net/wAY6Y/