Using AJAX I send a svg image to Django using the following function:
function uploadSVG(){
var svgImage = document.getElementById("SVG");
var serializer = new XMLSerializer();
var svgStr = serializer.serializeToString(svgImage);
$(document).ready(function(){
$.post("ajax_upload_svg/",
{
csrfmiddlewaretoken: csrftoken,
svgImage: svgStr
},
function(){
console.log('Done')
});
});
}
In Django I end up with the svg image as a string using the following function:
def uploadSVG(request):
svgImg = request.POST.get('svgImage')
return HttpResponse('')
The string I get looks like this:
<svg xmlns="http://www.w3.org/2000/svg" id="SVG" width="460" height="300" style="border:2px solid #000000"><rect x="150" y="70" width="160" height="130" fill="#292b2c"/></svg>
How can I convert this svg string into a svg file?
The solution is:
with open("svgTest.svg", "w") as svg_file:
svg_file.write(svgImg)
Related
I have a very simple svg
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
and trying to print it with html2canvas and jspdf. But whatever I do I get an error
Error loading svg data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22100%22%20width%3D%22100%22%20style%3D%22-webkit-writing-mode%3A%20horizontal-tb%3B%20-webkit-user-modify%3A%20read-only%3B%20-webkit-user-drag%3A%20auto%3B%20-web
Oe.error # html2canvas-1.1.2.min.js:20
and test.pdf file with just word test in it.
I googled this for about 3 hours, and in every place people recommend settings width/height atributes. Which, as you can see, doesn't help in my case.
I've simplified it as much as I could. Here is the full index.html I use:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<script src="../../../script/jsPDF/jspdf-2.3.1.umd.min.js" defer></script>
<script src="../../../script/jsPDF/html2canvas-1.1.2.min.js" defer></script>
<script>
function saveAsPDF(divId, usersName, certNumber = '', type = 'old')
{
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
var source = document.getElementById("printId");
pdf.html(
source, {
callback: function (pdf) {
pdf.save("test.pdf");
},
});
}
</script>
<input type='submit'
onclick='saveAsPDF();'
value='save'>
</body>
</html>
I also tried all possible versions of html2canvas:
1.1.2
1.1.5
1.2.2
1.3.2
and two versions of jspdf:
2.1.1
2.3.1
And two browsers: Chrome and Opera.
What can be my issue?
Edit:
I managed to make html2canvas work on it's own with the document below. Now the question is how to make it work with jspdf together:
<html>
<head></head>
<body>
<div id="printId">
this is circle:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<hr>
<h4>Image of above HTML content...</h4>
<div id="canvasImg"></div>
<script src="../../../script/jsPDF/html2canvas-1.3.2.min.js"></script>
<script>
html2canvas(document.getElementById('printId')).then(function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
document.getElementById('canvasImg').innerHTML = '<img src="'+canvasImg+'" alt="">';
});
</script>
</body>
</html>
It looks like jspdf is not able to add svg as vector graphic to a page. There are three options:
Use svg2pdf instead of jspdf to convert svg to pdf on it's own.
Use addSvgAsImage function of jspdf to place an svg in the pdf page manually.
Convert svg to jpg first, then use jspdf.
I've chosen the 3rd option and wrote a function, which I run before saving canvas as pdf:
htmlToJpg: function()
{
var canvas = document.querySelector('.to-print');
screenWidth = parseFloat(window.getComputedStyle(canvas).width);
var problematic = document.querySelectorAll('.convert-to-jpg');
problematic.forEach(function(el) {
html2canvas(el,
{
scale: 2480/screenWidth // 2480px - size for A4 paper, 300 dpi
}
)
.then(function(canvas) {
var img = canvas.toDataURL("image/jpeg");
el.innerHTML = '<img src="' + img + '" class="img">';
});
});
}
import html2canvas from 'html2canvas';
import { jsPDF as JsPDF } from 'jspdf';
import { useCallback, useEffect } from 'react';
export const useDownloadPdf = (name: string, isReady: boolean) => {
useEffect(() => {
if (isReady) {
const fileName = `${name}.pdf`;
const pdf = new JsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true,
});
const convertElements = document.querySelectorAll('.convert-on-pdf');
const elements = Array.from(convertElements) as HTMLElement[];
if (elements.length > 0) {
Promise.all(
elements.map(async (element) => {
const canvas = await html2canvas(element);
element.replaceWith(canvas);
}),
).then(() => {
pdf.html(document.body, {
callback: (generatedPdf) => {
generatedPdf.save(fileName)
},
});
});
} else {
pdf.html(document.body, {
callback: (generatedPdf) => {
generatedPdf
.save(fileName)
},
});
}
}
}, [isReady, name, setAtribute]);}
This question already has answers here:
jquery's append not working with svg element?
(17 answers)
Closed 2 years ago.
I'm trying to use JQuery to create an SVG element. The contents of the SVG is generated from a list of strings which is where I'm having my issues.
I'm populating a variable called 'arr' by looping through several hundred items in my database and creating an svg rect shaped based on that data which then gets appended to 'arr'. How can i append this list of string elements to my main SVG element in order to properly display it?
The main points here are:
Arr is populated with a list of strings, each one representing a shape to go inside the svg
The final Arr will be several hundreds strings
var mapSvg = $.parseHTML('<svg id="tile-map-svg" width="100%" height="300"></svg>');
arr = [
'<rect height="50" width="50" fill="blue"/>',
'<rect height="20" width="20" fill="green"/>'
]
mapSvg[0].append(arr);
$('#tile-map').append(mapSvg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div style="background:lightblue; padding:10px;">
<div id="tile-map">
</div>
<svg id='tile-map-svg' width="100" height="100">
<rect height="25" width="25" fill="red" class="tile"/>
</svg>
</div>
I also tried this and it didn't work either...
var mapSvg = $.parseHTML('<svg id="tile-map-svg" width="100%" height="600"></svg>');
arr = [
'<rect height="50" width="50" fill="blue"/>',
'<rect height="20" width="20" fill="green"/>'
]
for (var i = 0; i < arr.length; i++) {
var el = $.parseHTML(arr[i])[0];
mapSvg[0].append(el);
}
$('#tile-map').append(mapSvg);
How about looping over all the elements in arr before parsing the html:
let html = '<svg id="tile-map-svg" width="100%" height="300">';
arr.forEach(shape => {
html += shape;
});
html += "</svg>";
const mapSvg = $.parseHTML(html);
$("#tile-map").append(mapSvg);
Or simply copy HTML without jQ for example:
var mapSvg = document.getElementById("tile-map");
var arr = [
'<rect height="50" width="50" fill="blue"/>',
'<rect height="20" width="20" fill="green"/>'
]
var s = "<svg id='tile-map-svg' width=100 height=100>"+
arr.join('\n')+
"</svg>";
mapSvg.innerHTML = s;
mapSvg.innerHTML += s;
mapSvg.parentElement.innerHTML += mapSvg.outerHTML.replace(/</g,'<').replace(/>/g,'>');
<div style="background:lightblue; padding:10px;">
<div id="tile-map">
</div>
</div>
I have a string like this
var string = '<img src="test.jpg'><img src="test2.jpg>';
var dom = new JSDOM(string,{ includeNodeLocations: true });
dom = dom.window.document.querySelectorAll("img");
for(var i = 0;i< dom.length;i++) {
text = string.replace(/<img[^>]*>/g,'<amp-img layout="responsive" class="ampimageheight" src="'+dom[i].getAttribute('src')+'" width="200" height= "100"></amp-img>');
}
But my output is
<amp-img layout="responsive" class="ampimageheight" src="test2.jpg" width="200" height= "100"></amp-img><amp-img layout="responsive" class="ampimageheight" src="test2.jpg" width="200" height= "100"></amp-img>
In which only the second image src is replaced for 2 imags.I think this is because of the asynchronous.Can anyone please help me.Thanks.
Well, if you run replace in a loop, you don't need set the Regex's flag.
Because that replace all img when first time loop.
After first loop is do nothing.
So, you can remove Regex flag, or use a callback replace your function's second arguments, like this.
text = string.replace(/<img[^>]*>/g, function(str, index){
return '<amp-img layout="responsive" class="ampimageheight" src="'+dom[index].getAttribute('src')+'" width="200" height= "100"></amp-img>'
});
And it doesn't need loop;
I need to convert a svg into a png. I tried using this code
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #000;
fill-opacity: .8;
}
</style>
<body>
<div id="svg">
<?php include 'small.svg'; ?>
</div>
<button id="save">Save as Image</button>
<h2>SVG dataurl:</h2>
<div id="svgdataurl"></div>
<h2>SVG converted to PNG dataurl via HTML5 CANVAS:</h2>
<div id="pngdataurl"></div>
<canvas width="960" height="500" style="display:none"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement( "canvas" );
var ctx = canvas.getContext( "2d" );
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
// Now is done
console.log( canvas.toDataURL( "image/png" ) );
};
document.getElementById("pngdataurl").appendChild(img);
</script>
but it doenst work. im pretty sure it's because im using an image pattern, rect and a clip path to product my SVG. I say that because i tried this code with just the path object and it worked fine. I also tried using image magic with this code
<?php
error_reporting(E_ALL);
$svg ="small.svg";
$mask = new Imagick('mask.png');
$im = new Imagick();
//$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob($svg);
$im->setImageFormat("png32");
$im->compositeImage( $mask, imagick::COMPOSITE_DEFAULT, 0, 0 );
header('Content-type: image/png');
echo $im;
?>
Fatal error: Uncaught exception 'ImagickException' with message 'no decode delegate for this image format `' # error/blob.c/BlobToImage/346' in /home/[path to file]:10 Stack trace: #0 /home/path to file: Imagick->readimageblob('small.svg') #1 {main} thrown in /home/[path to file] on line 10
i would rather do this with js if possible. please help...my boss really hates me right now. Here is my svg
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 3384.2 2608.6" enable-background="new 0 0 3384.2 2608.6" xml:space="preserve">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/71/Weaved_truncated_square_tiling.png" x="0" y="0" width="100%" height="100%" />
</pattern>
</defs>
<rect width="3384.2" height="2608.6" clip-path="url(#shirt)" fill="url(#img1)" />
<clipPath id="shirt">
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#img1)" d="[coordinates that are too long for this post ]"/>
</clipPath>
</svg>
I had this issue recently too, at least with the pattern fills - it seems to be an issue with remote images, so if you base64 encode them into a data URL, it works fine:
var img = new Image();
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
var patternImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
patternImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', canvas.toDataURL());
};
img.src = patternImageUrl;
You can then add/update this image in a pattern def (or do this once and hardcode the result of canvas.toDataURL() into the pattern image href).
I'm just curious - is it possible to send by SVG image code in the following way?
<original div with inline SVG> -> Input field -> <final DIV>
I want to use following code:
Copy-1
<div id="source-1">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
</div>
<input name="dynamichidden-637" value="" id="pole" />
<br />
Copy-2
<div id="source-2"></div>
and Jquery:
jQuery( document ).ready(function( $ ) {
$('#copy-1').click(function() {
var value = $('#source-1').html();
var input = $('#pole');
input.val('')
input.val(input.val() + value);
return false;
});
$('#copy-2').click(function() {
$('#pole').appendTo('#source-2');
return false;
});
});
So my question is - is it possible to achieve it in that way? or using somehow other solution which will allow me to transfer svg code from one page to another without storing the data in Database? This is JSfiddle:
http://jsfiddle.net/v2br8/16/
You just need to create the copy using the value of the input:
var value = $('#pole').val();
var copy = $(value);
copy.appendTo('#source-2');
or simply:
$($('#pole').val()).appendTo('#source-2');
DEMO
Try: source-2.innerHTML=source_1.innerHTML