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>
<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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
<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>

Comments

Post a Comment

Popular posts from this blog

create pdf by using javascript

By using jspdf library which generates PDF files using java script.You can download library from http://jspdf.com/ after downloading  the library create a html or php file in example folder and paste below code.It already as many examples. but sharing this code ,because we can,t add edit or alter code.but we can add function to work according to our condition.because we can replace or change other option in saveondisk button.one more think we can add php variable in it to create pdf file with php content. <!doctype> <html> <head>     <title>jsPDF</title>     <link rel="stylesheet" type="text/css" href="css/main.css">      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>      <script type="text/javascript" src="../libs/downloadify/js/swfobject.js"></script>     <script type="text/javascript" src="
Read more

yii framework simple shopping cart tutorial for beginners

Provides shpping cart functionality for models. Cart is a container object that holds items collection and have handy methods to work with it. It uses user session as a cart data storage. Installing and configuring 1 way: Registration in the config file Add to protected/config/main.php : [php] 'import'=>array( 'ext.yiiext.components.shoppingCart.*' ), 'components' => array( 'shoppingCart' => array( 'class' => 'ext.yiiext.components.shoppingCart.EShoppingCart', ), ) 2 way: Registration by necessity [php] $cart = Yii::createComponent(array( 'class' => 'ext.yiiext.components.shoppingCart.EShoppingCart' )); //Important! $cart->init(); $book = Book::model()->findByPk(1); $cart->put($book); Preparing a model Models that you are planning to put into the cart should implement IECartPosition interface: [php] class Book extends CActiveRecord implements IECartPosit
Read more

yii2 arrayhelper::map vs array_map

Recently i was working on YII2 project in which i came across arrayhelper::map() and was thinking alternate in php. so i used array_map() also tested the performance of both in yii2 by start time and end time for both ,surprising was that execution time remain same.please let me know if there is any alternate that will execute faster then arrayhelper::map(). Adding the code in yii2: function find_field($value){ $value['id'] = $value['name']; return $value['id']; } $array = ['1'=>['id'=>1,'name' =>"pramodh",'address' =>'45 vk street','loc'=>'cbe'],'2'=>['id'=>2,'name' =>"pramodh kumar",'address' =>'45343 vk street','loc'=>'pune']]; $a = array_map(array($this,'find_field'),$array); print_r($a); yii2 code: $list = ArrayHelper::map($array,  ' id ' ,  
Read more