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 );
}
?>
Related
I want to question for my problem about a Slider/Swipe, i want the slider can move automatically.
so, I have a page php with Slider/Swipe, but its not move automatically, how to make the slider automatic move.
please help for my problem, I really hope for your help, thank you all
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="tmp_home_swipe/css/swiper.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css" /> -->
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 70%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container" id="slideshow">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="tmp_home_swipe/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
thanks for attention.
var swiper = new Swiper(".swiper-container", {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
https://themesbrand.com/velzon/docs/php/swiper-slider.html
I want to add id to cloned img tag as I want to store the data of cloned object to database. can anyone help please..I also want to store the x and y positions provide by the user using javascript..I just want to know how to assign different id's to the cloned img tag.
Here is my code.
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="dragndrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="include/jquery-ui.css">
<script src="include/jquery-1.10.2.js"></script>
<script src="include/jquery-ui.js"></script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
width:500px;
height :500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div class = "col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id ="droppable">
</div>
</div>
</body>
</html>
here is dragndrop.js file.
// JavaScript Document
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function(e, ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.appendTo('#droppable');
ui.helper.remove();
}
});
});
i used jquery fancy box for previewing data from mysql .
I used the http://www.picssel.com/playground/jquery/postPreview_15jan13.html example .
I want to pass the "id=1" to the grid.php
When i pass outside the ,im able to see the preview ,since preview is inside the
form the value 1 is not able to pass to grid.php page.
How can i be able to achieve this?
Below is the code :
!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jose Francisco Diaz / picssel.com" />
<title>POST preview</title>
<link rel="stylesheet" type="text/css" href="fancybox2.1.4/jquery.fancybox.css" />
<style type="text/css">
a {outline: 0 none; text-decoration: none;}
a img {border: 0 none;}
#wrap { width: 800px; margin: 20px auto; font-family: arial, sans-serif; font-size: 14px;}
.preview2 {width: 80px; padding: 5px; background: #ededed; display: block; line-height: 16px; text-decoration: none; text-align: center; border: solid 1px #ccc;}
label {display: block}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="fancybox2.1.4/jquery.fancybox.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function () {
$('.preview2').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: this.href, // preview.php
data: $("#postp").serializeArray(),
success: function (data) {
// on success, post (preview) returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: false,
width: 905,
height: 505,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
} // success
}); // ajax
}); // on
}); // ready
/* ]]> */
</script>
</head>
<form id="postp" method="post" action="">
<p>
<label for="login_name">data:
</label>
<input type="text" id="login_name" name="login_name" size="30" /><a class="preview2" href="grid.php" id="preview2">Preview</a>
</p>
<p>
<input type="submit" value="submit" />
</p>
</form>
The form id was missing .Got the value
I am trying to implement JQueryUI resizable. It's not working below is my tentative demo which I will implement later in actual code. Please help me to solve it. It's not working.
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
//var a = $("#resizable").html();
//alert(a);
$("#resizable").resizable();
});
</script>
</head>
<body>
<div id="demo-frame">
<meta charset="utf-8">
<div class="demo">
<div class="ui-widget-content ui-resizable" id="resizable">
<h3 class="ui-widget-header">Resizable</h3>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
</div>
</div>
</div>
</body>
It's the divs you have inside of your div that seem to be causing an issue. I commented them on on this jsFiddle http://jsfiddle.net/ta9N4/ and it appears to be working fine.
The method resizable() comes from jQuery UI API.
And you didn't include jQueryUI in your html page.
Go here to download it (or grab a link to this file), and include it like you did for jQuery (<script> tag).
How can you prevent an overlay in greybox?
I am using the following code:
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
In the css, you need to remove
#GB_overlay {
background-color: #000;
position: absolute;
margin: auto;
top: 0;
left: 0;
z-index: 100;
}
In order to remove the overlay