Iphone mobile case designer in canvas using html5 and fabric jquery


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Drag Demo</title>
<link href=”copy.css” rel=”stylesheet” type=”text/css” />
<script src=”Scripts/jquery.filedrop.js”></script>
<link rel=”stylesheet” href=” Scripts/styles.css” />
<script src=”Scripts/all.js”></script>
<script src=”Scripts/font_definition.js”></script>

<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
<script src=”Scripts/script.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js”></script&gt;
<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css&#8221; />

<link href=”styles/style.css” rel=”stylesheet” type=”text/css” />
<script src=”/Scripts/ canvas2image.js” type=”text/javascript”></script>
<script src=”Scripts/base64.js” type=”text/javascript”></script>
</head>
<body>
<div>

<canvas id = “canvas” style=”float: left; width: 250px; margin:14px 30px 30px 51px; height: 325px; border: 5px solid #d1cece; overflow: hidden; border-radius: 20px;” ondrop=”dropIt(event);” ondragover=”event.preventDefault();”></canvas>    –>

<div>
<input type=”file” id=”fileElem” accept=”image/*” >
<div id=”fileSelect”>Select some files</div>

<button onclick=”Clear_image();return true;”>Erase Everything</button>
</div>
<div id=”thumbnail”></div>
<div>
<img id=”MyPix” border=”1px”>
</div>

<div style=” border: none; padding: 5px; margin:0px 350px;” id=”text”>
Type text :
<input type=”text” name=”txt” id=”txt” /><div style=”clear: both;”>
</div>
Font size :
<select id=”ddlsize”>
<option value=”80″>8</option>
<option value=”100″>10</option>
<option value=”120″>12</option>
<option value=”250″>25</option>
<option value=”360″>36</option>
</select><div style=”clear: both;”>
</div>
Font color :
<select id=”ddlcolor”>
<option value=”green”>green</option>
<option value=”#006699″>#006699</option>
<option value=”yellow”>yellow</option>
<option value=”#555555″>#555555</option>
<option value=”black”>black</option>
</select><br />
<button id=”bindtext”>
Bind Text
</button>
</div>

<form>
<button id=”sss”>sss</button>
<button id=”ddd”>ddd</button>
<button id=”ss”>ss</button>
<button id=”resize”>resize</button>

<input type=”button”
value=”Put Image”
name=”button3″
onClick=”putImage()”>
</form>

<script type=”text/javascript”>
function Clear_image() {
var c5 = document.getElementById(“canvas”);
var c5_context = c5.getContext(“2d”);
c5_context.clearRect(1, 1, 600, 300);
}
function dragIt(event) {
event.dataTransfer.setData(“Text”, event.target.id)
};

function dropIt(event) {
var theData = event.dataTransfer.getData(“Text”);
dt = document.getElementById(theData);
event.preventDefault();
var c = document.getElementById(“canvas”);
//for (var i = 0; i < files.length; i++) {
//var count=1;
//c=count;

//c.width=  250;
//c.height = 350;
//count++
var ctx = c.getContext(‘2d’);
ctx.draggable = true;
ctx.drawImage(dt,0,0);
//context2.drawImage(image, 0, 0, 640, 480);
//context.putImageData(imageData, 0, 0);
//fabric.Image.fromURL(‘baby-feeding.jpg’, function(img) {
//var oImg = img.set({ left: 100, top: 100, angle: 0 }).scale(0.6);
// canvas.add(oImg).renderAll();
//});
//loadImageCounter++;
//canvas.renderAll();
}
//};
var count = 0;
var fileSelect = document.getElementById(“fileSelect”),
fileElem = document.getElementById(“fileElem”);
$(‘#fileElem’).val(“”);

fileElem.addEventListener(“click”,function(e){
var files = this.files
handleFiles(files)
},false)
fileSelect.addEventListener(“click”, function (e) {
fileElem.click();
e.preventDefault();
}, false);
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;

if(!file.type.match(imageType)){
console.log(“Not an Image”);
continue;
}
var image = document.createElement(“img”);
var thumbnail = document.getElementById(“thumbnail”);
image.file = file;
thumbnail.appendChild(image)
var reader = new FileReader()
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
}(image))
image.id = count;
count++;
image.draggable = true;
image.ondragstart = dragIt;
var ret = reader.readAsDataURL(file);
}
}
</script>
<script>
$(‘#sss’).click(function () {
var data = document.getElementById(“canvas”).toDataURL();

alert(data);
$.post(“sss.php”, {
imageData : data
}, function(s) {
window.location = s;
alert(s);
});
});
</script>
<script>
$(‘#ss’).click(function () {
var canvasIMG = document.getElementById(“canvas”); // Canvas to resize image
canvasIMG.width=  250;
canvasIMG.height = 350;
data = canvasIMG.toDataURL();
alert(data);
$.post(“sss.php”, {
imageData : data
}, function(s) {
window.location = s;
alert(s);
});
});
</script>
<script>
$(‘#ndtext’).click(function () {
var size = $(“#ddlsize”).val();
var color = $(“#ddlcolor”).val();
var div = document.createElement(‘DIV’);
div.innerHTML = ‘<div id=”txtdiv” style=”color:’ + color + ‘;font-size:’ + size + ‘px;cursor:pointer;”>’ + $(“#txt”).val() + ‘</div>’;
div.setAttribute(‘style’, ‘height:30px !important;width:80px !important;’);
div.setAttribute(‘class’, ‘thumbnail’);
$(‘#thumbnail’).append(div);
//$(div).draggable();
return false;
});
</script>
<script>
$(‘#bindtext’).click(function () {
var font = $(“#ddlfonttype”).val();
var text = $(“#txt”).val();
var size = $(“#ddlsize”).val();
var color = $(“.wheel”).val();
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
context.fillStyle = color;
context.font = size;
context.fillText(text, 50,50);
});
</script>
<script>
function putImage()
{
// put the png copy of canvas into the document
var canvas1 = document.getElementById(“canvas”);
if (canvas1.getContext) {
var ctx = canvas1.getContext(“2d”);                // Get the context for the canvas.
var myImage = canvas1.toDataURL(“image/png”);      // Get the data as an image.
}
var imageElement = document.getElementById(“MyPix”);
imageElement.width=  250;
imageElement.height = 350;  // Get the img object.
imageElement.src = myImage;                           // Set the src to data from the canvas.
}
</script>
</body>
</html>
if the post useful to you then donate just by clicking the link http://adf.ly/MMZbv

Advertisements
About

myself pramodh kumar yet another php developer from India and have worked on oops,procedural,yii framework,codeigniter,wordpress,joomla,api and more.

Tagged with: , , , , , , ,
Posted in Practice Makes a beginner to become php programmer expert(practical task to become php programmer)
2 comments on “Iphone mobile case designer in canvas using html5 and fabric jquery
  1. Jos Dewe says:

    how to get .js and css file include?

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow php tutorial on WordPress.com
categories
Calendar
September 2012
M T W T F S S
« Jul   Oct »
 12
3456789
10111213141516
17181920212223
24252627282930
Follow me on Twitter
Blog Stats
  • 73,741 hits
%d bloggers like this: