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...
Related
I'm trying to draw an existing image onto a canvas and encode it via base64. Here is my code:
var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";
document.getElementById("Table1").appendChild(canvas);
var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("2d");
myCanvas.width = 135;
myCanvas.height = 170;
var img = new Image();
img.onload = function(){
myCanvasContext.drawImage(img,0,0);
}
img.src = "https://example.com/asd.png";
var toURL = myCanvas.toDataURL();
console.log(toURL);
It draws the image to the canvas, but the toURL is an empty image base64 code with 135x170 size. I've tried to decode it, but it always shows a blank image.
I can't find what is the problem with it.
The problem is that myCanvas.toDataURL(); is called before the image is actually loaded. For this you'd need to move it inside the onload-callback, like:
var img = new Image();
img.onload = function(){
myCanvasContext.drawImage(img,0,0);
// ...moved here
var toURL = myCanvas.toDataURL();
console.log(toURL);
}
img.src = "https://example.com/asd.png";
The following is a simplified example:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = "";
img.src = 'https://www.gravatar.com/avatar/8939f42cb6c31e31e570ea8f07fe9757?s=32&d=identicon&r=PG';
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
console.log(canvas.toDataURL());
};
document.body.appendChild(canvas); // append the canvas ...
document.body.appendChild(img); // ... and img for demo purposes only
var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";
document.getElementById("Table1").appendChild(canvas);
var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("2d");
myCanvas.width = 500;
myCanvas.height = 500;
var img = new Image();
img.onload = function(){
myCanvasContext.drawImage(img,0,0);
}
img.src = "http://underthebridge.co.uk/wp-content/uploads/2014/03/Example-main-image1.jpg";
var toURL = myCanvas.toDataURL();
console.log(toURL);
var img2 = document.createElement("img");
img2.id = "MyImg";
img2.src = toURL;
document.getElementById("Table1").appendChild(img2);
<div id='Table1'> </div>
You can't put an base64 inside a canvas but only in a tag img.
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
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
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 Have a issue about write text to image. I need loop the image. But i get some issue. When i do it , Last image showing and the images size is small. Do anyone help me ?
var div=document.getElementById("locations");
var canvas;
window.onload = function(){
for(var i=0;i<10;i++){
canvas=document.createElement("canvas");
canvas.style.width="75px";
canvas.style.height="75px"
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "17px Calibri";
context.fillText(i, 30, 36);
};
imageObj.src = "image.png";
div.appendChild(canvas);
};
}
<div id="locations"></div>
<canvas id="myCanvas" width="75" height="75"></canvas>
Result Image
Use canvas.height and width values instead of CSS style. CSS style values applied after canvas drawn.
var div=document.getElementById("locations");
var canvas;
window.onload = function(){
for(var i=0;i<10;i++){
canvas=document.createElement("canvas");
canvas.width=75;
canvas.height=75;
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "17px Calibri";
context.fillText(i, 30, 36);
};
imageObj.src = "http://placehold.it/350x150";
div.appendChild(canvas);
};
}
<div id="locations"></div>