I've an SVG image that includes two PNG images that makes them one SVG image, now I want to convert this image into PNG/JPG. I've the following code of SVG in react:
import P1 from "../../assets/P1.png";
import P2 from "../../assets/P2.png";
<canvas id="imageCanvas" width="321" height="469"></canvas>
<img id="imageR" ></img>
<svg id="imageCard" name="imageCard" width="321" height="469" xmlns="http://www.w3.org/2000/svg">
<image href={P2} width="321" height="469" />
<image href={P1} x="93" y="151" width="48" height="48" />
</svg>
It showing the proper result in the browser, now I want to convert this svg image to PNG/JPG format, I've tried an solution to convert this image to canvas first and then to PNG:
var svg = document.querySelector('svg');
var img = document.querySelector('#imageR');
var canvas = document.querySelector('#imageCanvas');
// get svg data
var xml = new XMLSerializer().serializeToString(svg);
// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64;charset=utf-8,';
// prepend a "header"
var image64 = b64Start + svg64;
// set it as the source of the img element
img.onload = function () {
// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);
}
ImageBase64 = image64;
img.src = image64;
but it is not work properly, it only works if I don't use image tag inside the SVG, please guide me, thank you.
Related
I have a whiteboard option during a video call in my web application built in angularjs (1.x). Users can draw above the video in a canvas element. I need to take a screenshot of the current video position and drawing on the canvas. I am able to get the video frame as base64 URL(second image) and canvas drawing as base64 URL(third image) separately. But I need to get it as a combined single image in base64 URL like the first image.
HTML
<img id="img1">
<img id="img2">
<canvas id="mergedImage" width="382" height="510"></canvas>
JS
var drawingImg1 = document.getElementById('img1');
drawingImg1.setAttribute('src', img1);
var drawingImg2 = document.getElementById('img2');
drawingImg2.setAttribute('src', img2);
var c = document.getElementById('mergedImage');
var width = 382;
var height = 510;
var ctx = c.getContext("2d");
var imageObj2 = new Image();
imageObj2.onload = function (){
ctx.drawImage(imageObj2, 0, 0, width, height);
var imageObj1 = new Image();
imageObj1.onload = function (){
imageObj1.style.objectFit = "cover";
ctx.drawImage(imageObj1, 0, 0,width, height);
};
imageObj1.src = img2;
};
imageObj2.src = img1;
I tried the above code and it gives the output as video frame image only not the drawing included.
I want the output as the first image. Please, someone, guide me to do this.
I have created a jsfiddle here
The following solution worked for me to overlap 2 images and got a single image in a canvas.
Link
I have 3 canvases. I crop a region from canvas1 and display it on canvas 2 . Then I want to convert canvas 2 image to a URL and to see if can convert that URL back to a image. I want it to be displayed in canvas c4.Any help is appreciated.
// image is drawn here , I want this image to be converted to a dataURL
//then back to image and display it in canvas c4
var c2 = document.getElementById("area_c2");
var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");
image_src.width = c2.width;
image_src.height = c2.height;
ctx2.drawImage(image_src, 0, 0,image_src.width, image_src.height);
var c4 = document.getElementById("area_c4");
var ctx4 = c4.getContext("2d");
var dataURL = c2.toDataURL();
var myImg = new Image;
myImg.src = dataURL;
myImg.width = c4.width;
myImg.height = c4.height;
ctx4.drawImage(myImg, 0, 0, image_src.width, image_src.height); //Image //is not displayed here , I want the image to take the size of the canvas
<canvas id ="area_c2" style="width:300px;height:300px;border:3px solid
black;z-index:1" >
</canvas>
<canvas id ="area_c4" style="width:300px;height:300px;border:3px solid
black;z-index:1;background:red">
</canvas>
The reason your solution did not work is because you did not wait for the onload event. Before the onload event the image will not render.
To convert a canvas to a data URL is simple, use the .toDataURL(); method of the canvas element.
Then to convert the data URL back to an canvas image, you would first have to create an Image element and set its source as the dataURL. After getting the image onload event you can draw the image onto the canvas. This could be accomplished as shown:
Assuming the data URL is in a variable called dataURL, the canvas context is in a variable called ctx.
var img = new Image;
img.onload = () => { ctx.drawImage(img, 0, 0); };
img.src = dataURL;
The final solution would go like this:
var cdata2 = c2.toDataURL();
var cimg2 = new Image;
cimg2.onload = () => { ctx4.drawImage(cimg2, 0, 0, c4.width, c4.height); };
PS: You don't have to scale the image object by specifying the width and height, the canvas will do that when you specify the destination width and height.
I want to generate an image of the DOM element containing base64 images. For the same, I am converting the DOM element to SVG and then drawing that SVG on the canvas and obtaining base64 from it.
It is observed that HTML element having a smaller image is rendered properly, while that having larger image isn't rendered in the canvas in Edge.
Here is a snippet for the same:
<html>
<body>
<div id="content1">
<img id="smallImg" style="width: 200px; height: 150px;" src="data:image/jpeg;base64,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">
</div>
<div id="content2">
<img id="bigImg" src="data:image/jpeg;base64,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"
style="width: 300px; height: 200px" src="">
</div>
</body>
<script>
function htmlToXml(html) {
var doc = document.implementation.createHTMLDocument();
var text = html.innerHTML;
doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
doc.documentElement.innerHTML = text;
let htmls = (new XMLSerializer).serializeToString(doc.documentElement);
return htmls;
}
function getImage(element) {
var htmlElement = element;
var canvasElement = document.createElement('canvas');
canvasElement.height = 800;
canvasElement.width = 500;
var canvasContext = canvasElement.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="800" crossorigin="anonymous">' +
'<foreignObject width="500" height="800">' +
htmlToXml(htmlElement) +
'</foreignObject>' +
'</svg>';
var url = '';
var DOMURL = window.URL;
var svg = new Blob([data], {
type: 'image/svg+xml;charset=utf-8'
});
url = DOMURL.createObjectURL(svg);
var img = new Image();
img.setAttribute('width', '500');
img.setAttribute('height', '800');
img.onload = function() {
canvasContext.drawImage(img, 0, 0);
var res = canvasElement.toDataURL('image/png');
console.log(res);
}
img.crossOrigin = 'Anonymous';
img.src = url;
}
var htmlElement1 = document.getElementById('content1');
var htmlElement2 = document.getElementById('content2');
getImage(htmlElement1);
getImage(htmlElement2);
</script>
</html>
Run it in Edge and observe the output in the console. The base64 images of both the HTML elements are logged separately. The base64 for content1 is generated properly while that for content2 contains a blank image.
Loading an image is an asynchronous task, even when the src is set to a dataURL.
I guess Edge's young integration of <foreignObject> still has some quirks for delaying the outside's <img> onload event until all its inner resources are effectively loaded.
I don't think there is much you can do here, apart from filling an issue, or adding a delay inside the <img>'s onload event handler.
You may want to try HTMLImageElement.decode() but I'm not even sure Edge supports this, nor if it may work at all.
And for your more general case, you may want to avoid this foreignObject hack altogether and rather draw your DOM directly from the canvas API, just like html2canvas does.
I'm trying to transform an SVG into an image with pdfmake.
const svg = document.getElementById('chart-grafico-pizza').childNodes[0];
const img = document.createElement('img');
const canvas = document.getElementById('teste-canvas');
// get svg data
const xml = new XMLSerializer().serializeToString(svg);
// make it base64
const svg64 = btoa(xml);
const b64Start = 'data:image/svg+xml;base64,';
// prepend a "header"
const image64 = b64Start + svg64;
// set it as the source of the img element
img.src = image64;
// draw the image onto the canvas
(canvas as HTMLCanvasElement).getContext('2d').drawImage(img, 0, 0);
The image is always returned as undefined.
I don't see any problems with your code, neither with SVG.
Your code, which you obviously got from here
Drawing an SVG file on a HTML5 canvas
works perfectly fine, assuming that your query selectors work. Which probably is exactly the issue here... Since you did not provide your HTML, we can of course not check for that.
https://jsbin.com/qacodugive/1/edit
What do you mean by "the image is undefined"? The variable img clearly isn't. It's a DOM Element at any point in time.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>SVG here</div>
<svg height="100">
<rect width="100" height="100" />
</svg>
<div>Canvas here (Click "Run with JS" to render)</div>
<canvas></canvas>
</body>
</html>
JS
var svg = document.querySelector('svg');
var img = document.createElement('img');
var canvas = document.querySelector('canvas');
// get svg data
var xml = new XMLSerializer().serializeToString(svg);
// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';
// prepend a "header"
var image64 = b64Start + svg64;
// set it as the source of the img element
img.src = image64;
// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);
I'm using drawImage(). This is my code. imDiv holds an inline svg.
var c =document.getElementById( 'cvs' );
var ctx =c.getContext( '2d' );
var img =document.getElementById( 'imDiv' );
ctx.drawImage( img, 0, 0 ); //TypeMismatchError
I'm getting a TypeMismatchError error. What might be the reason and How can I fix this?
You must convert the SVG to an image first, then draw the image to canvas.
There are some things you need to take into consideration:
The SVG must be well-formed (think XML)
The first element in the SVG must be xmlns attributed
There are variable security restrictions depending on browser when it comes to foreignObject (to embed HTML etc.). It will work in some (Firefox, without external references), others not so much (f.ex. Chrome). This is currently in a state of vacuum, and we can't do much about it on client side
Here is one way of doing this:
// Inline SVG:
var svg = document.querySelector('svg').outerHTML, // make sure SVG tags are included
canvas = document.querySelector('canvas'), // target canvas
ctx = canvas.getContext('2d');
// convert to image (see function below)
// converting to image is an asynchronous process, so we need a callback
svgToImage(svg, function(img) {
// HERE you could insert the image to DOM:
// var myElement = document.getElementById(elementID);
// myElement.appendChild(img);
// set canvas size = image
canvas.width = img.width;
canvas.height = img.height;
// draw SVG-image to canvas
ctx.drawImage(img, 0, 0);
});
// this will convert an inline SVG to a DATA-URI
function svgToImage(svg, callback) {
var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg),
img = new Image;
// handle image loading, when done invoke callback
img.onload = function() {
callback(this);
};
img.src = url;
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<linearGradient id="gradient">
<stop offset="0%" stop-color="#00f" />
<stop offset="100%" stop-color="#f70" />
</linearGradient>
<rect fill="url(#gradient)" x="0" y="0" width="100%" height="100%" />
</svg>
<br>
<canvas></canvas><br>
As of now, it's impossible to draw div or svg elements onto the canvas. The first argument passed to context.drawImage() must be an Image, canvas, or even a video element (using the svg is probably causing the TypeMismatchError).
So you'll have retrieve an actual Image on the document with getElementById() or create one with new Image().