I am trying to make a image sticker html 5 app. In which user uploads a photo and then places stickers on top of it. I am able to do it through HTML 5 canvas and Jquery library free transform to rotate and scale stickers on top of image but when i convert this into jpeg the css transaction is lost and only image with stickers on top is generated. Code is written below. Is there any other way to do it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://greenethumb.com/github/jquery-free-transform/css/jquery.freetrans.css"/>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/Matrix.js"></script>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/jquery.freetrans.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.core.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.ui.resizable.css" />
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1" />
<style>
#draggable-zone {
background: #000 url(images/space.jpg) 0 0 no-repeat;
border: 3px solid #000;
height: 500px;
margin: 2em auto;
overflow: hidden;
width: 600px;
}
.ui-wrapper {
overflow: visible !important;}
.ui-resizable-handle {
background: #f5dc58;
border: 1px solid #FFF;
z-index: 2;}
.ui-rotatable-handle {
background: #f5dc58;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
position: absolute;
top: -5px;
width: 10px;}
.ui-rotatable-handle.clone {
visibility: hidden;}
</style>
</head>
<body>
<div id="imagediv" style="width:400px;" >
<div style="width:400px;border:1px solid #000;position:relative" >
<img src="lordmeowington.png" width="400px">
<div id="draggable-wrapper" style="position:absolute;top:0">
<div id="resizable-wrapper">
<img src="funny_glasses.png" width="150" height="150" alt=" " id="elem-wrapper" />
</div>
</div>
</div>
</div>
<input type="button" value="saveimage" onclick="demoFromHTML()" />
<input type="button" value="remove" onclick=" Demo()" />
<input type="file" accept="image/*" capture="camera" />
<input type="text" value="" id="innerimage" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.rotatable.js"></script>
<script>
$(document).ready(function() {
var drWr = $('#draggable-wrapper'),
rsWr = $('#resizable-wrapper'),
elem = $('#elem-wrapper');
elem.resizable({
aspectRatio: true,
handles: 'ne, nw, se, sw'
});
drWr.draggable();
elem.parent().rotatable();
});
function Demo()
{
$('.ui-rotatable-handle').css('border','0px');
$('.ui-resizable-handle').css('background','none');
$('.ui-resizable-handle').css('border','none');
$('.ui-rotatable-handle').css('background','none');
html2canvas($("#imagediv"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/jpeg');
imgData.width=400;
console.log(imgData);
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(imgData);
//window.open(imgData);
}
});
}
</script>
</body>
</html>
Php Code is below
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
