Posted By
Bajarangi soft ,
Posted On 16-09-2020
Let's learn
1.Create html page and create svg in that file.
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(205,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>
<canvas id="canvas"></canvas>
<script>
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
$('#demo').on('click', function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
console.log(imgURI);
// alert(imgURI);
$.ajax({
url: "execute.php",
type: "POST",
data: {
imgURI: imgURI,
},
success: function(dataResult){
$('.message').html('<div class=\'\'><div class=\"alert icon-alert with-arrow alert-success form-alter\" role=\"alert\">\n' +
'<i class=\"fa fa-fw fa-check-circle\"></i>\n<strong> Success ! </strong> <span class=\"success-message\"> SVG converted Successfully. </span>\n</div></div>');
}
});
};
img.src = url;
});
</script>
3.Create php file to convert base64 format string into unique name and that name replace to image using str_replace() method.
<?php
if (isset($_POST['imgURI'])) {
define('UPLOAD_DIR', 'upload/');//to save image files
$img = $_POST['imgURI'];
$img = str_replace('data:image/png;base64,', '', $img);//replace the name of image
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';//with unique name each image saves
$success = file_put_contents($file, $data); // image put to folder upload
echo $success ? $file : 'Unable to save the file.';
}
?>
Complete code of converting svg into png using php.
<!DOCTYPE html>
<html>
<title>Convert SVG to PNG using PHP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<div class="container " style="margin-top: 70px">
<div class="text-center">
<h1>Convert SVG to PNG using PHP</h1>
</div>
<br>
<br>
<div class="message"></div>
<div class="well">
<button id="demo" class="btn btn-primary">svg to png</button>
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(205,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>
<canvas id="canvas"></canvas>
<br>
</div>
</div>
</body>
<script>
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
$('#demo').on('click', function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
console.log(imgURI);
// alert(imgURI);
$.ajax({
url: "execute.php",
type: "POST",
data: {
imgURI: imgURI,
},
success: function(dataResult){
$('.message').html('<div class=\'\'><div class=\"alert icon-alert with-arrow alert-success form-alter\" role=\"alert\">\n' +
'<i class=\"fa fa-fw fa-check-circle\"></i>\n<strong> Success ! </strong> <span class=\"success-message\"> SVG converted Successfully. </span>\n</div></div>');
}
});
};
img.src = url;
});
</script>
</html>