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);
Related
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.
I have a preload link in my html.
<link rel="preload" href="sprite.png" id="mySprite" as="image">
How can I convert this to a Image in Javascript?
(let sprite = new Image(myPreloadeImageFromHTML)
I have a lot of images needed, but they do not load on time, which results in no images shown.
How can I preload it and obtain it in Javscript as an Image using a <link rel="preload">?
I have created a link and a canvas in HTML and using javascript I am fetching that link href then created an image from that link and then inserted that image into the canvas.
HTML:
<!-- Your Link -->
<link rel="preload" href="https://www.android-examples.com/wp-content/uploads/2016/03/demo_image.jpg" id="mySprite" as="image">
<!-- Create Canvas -->
<canvas id="my-canvas" />
JS:
var img1 = new Image();
img1.src = document.getElementById("mySprite").href;
var c = document.getElementById("my-canvas");
var ctx = c.getContext("2d");
img1.onload = function () {
c.width = img1.width;
c.height = img1.height;
ctx.drawImage(img1, 0, 0);
}
Here is the reference:
https://jsfiddle.net/uLwpsdqt/
Im trying to set up a background image in my html canvas by creating a function that clears the canvas and draws the background image to fill the canvas. I've been trying to figure out where I went wrong and why no images are appearing on preview. (I've already double checked my links for spelling errors)
`<html>
<head>
<title>Apple Dropper</title>
<meta charset = "utf-8">
<script src ="proa1.js">
// set src of images in variables
var canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
let bg = new Image();
bg.src = "projectimages/gifani.gif";
let pic = new Image(0,350);
pic.src = "projectimages/bucket.png";
let fish = new Image(300,0);
pic.src = "projectimages/fish.png";
// Make sure the image is loaded first otherwise nothing will draw.
bg.onload = function(){
ctx.drawImage(bg,0,0);
}
</script>
</head>
<body>
<h1>CPSC 1045 Apple Dropper Project</h1><br>
<h2>Alleluia Anteros</h2>
<!--- canvas --->
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;" >
</canvas>
<br>
<!--- control panel --->
</body>
</html>`
If you want a regular background image it would be much easier to do so using CSS. You would select the body tag and use the background-img property with the value of URL and put the URL of the image in the parenthesis. To make to cover the page you would have to use the property of background-size with the value of cover.
body{
background-img:url(bckgrndimg.png);
background-size:cover;
}
I am trying to export the canvas into svg . but the toDataURL function returning the data as "data:image/png;base64..."
I don't want to use complex function/library .
I am using the below if any one can modify it also ,it is helpful for me
var dataURL=canvas.toDataURL('image/svg+xml');
if (navigator.userAgent.indexOf("Safari") > -1 &&
navigator.userAgent.indexOf("Chrome") === -1) {
console.log(dataURL);
window.open(dataURL);
} else {
var parts = dataURL.split(';base64,');
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
console.log(uInt8Array);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var blob = new Blob([uInt8Array], {type: "image/svg+xml;charset=utf-8"});
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = orientation +".svg";
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
The <canvas> element only holds a pixels buffer.
Even though the 2D API is mostly based on vector drawings, the actual content is only raster.
Exporting to svg is not an option in any mainstream browser.
This means that your 'image/svg+xml' will not be recognized anywhere and indeed they will fallback to image/png.
You said you don't want to use complex function/library, so let's just say you're out of luck, because the solutions implies to overwrite all the drawing operations in order to build pathes that can be mapped to SVG elements, which is not straightforward, (even if all is mostly doable, except ImageData pixel manips).
If you really want to do this, then you may want to have a look at some libraries, this one seems to be made only for this purpose, so I hope it's lightweight an performant enough, though I never used it myself, fabricjs has such an option too, but then we're clearly in the heavy-weighted category.
my vanilla js solution may help you, without using the canvas.toDataURL way
steps
get or create an SVG element
use the XMLSerializer().serializeToStrin() serialize method get SVG string
use window.btoa() method to convert SVG string to base64 String
manually create the data:image/svg+xml; type base64 URL string
then do something you wanted; for example, download the image an so on.
source codes
const userName = "xgqfrms";
const watermark = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" viewBox="0 0 100 100" width="100" height="100">
<text x="25" y="50" fill="#00ff00">${userName}</text>
</svg>
`;
const app = document.querySelector(`#app`);
app.insertAdjacentHTML('beforeend', watermark);
const svgElement = document.querySelector(`#svg`);
// console.log(`svgElement =`, svgElement);
const svgURL = new XMLSerializer().serializeToString(svgElement);
// console.log(`svgURL =`, svgURL);
const imgSrc = `data:image/svg+xml;base64,${window.btoa(svgURL)}`;
console.log(`imgSrc =`, imgSrc);
const img = document.querySelector(`#img`);
img.src = imgSrc;
#app > svg {
visibility: hidden;
width: 0;
height: 0;
}
#app {
width: 100vw;
height: 100vh;
min-width: 1366px;
min-height: 768px;
overflow-x: hidden;
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>js canvas to base64 svg image</title>
</head>
<body>
<main id="app">
<img id="img" src=""/>
</main>
</body>
</html>
demo
https://codepen.io/xgqfrms/pen/YzEzmxw
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.