|
 |
| |
การกดบันทึกรูปภาพลงฐานข้อมูลหลังจากที่เราตกแต่งเสื้อผ้าเสร็จแล้ว |
| |
 |
|
|
 |
 |
|
การกดบันทึกรูปภาพลงฐานข้อมูลหลังจากที่เราตกแต่งเสื้อผ้าเสร็จแล้ว เราจะสามารถใช้แบบ form action="xxx.php" อะไรแบบนี้ได้รึป่าวครับ เพื่อบันทึกรูปที่เราตกแต่งเสร็จแล้วลงฐานข้อมูล
Code (PHP)
<!DOCTYPE html>
<head>
<title>Custom T-Shirts - Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/fabric.js" type="text/javascript"></script>
<style>
*{padding:0;margin:0;}
.content{
margin:0 auto;
width:600px;
max-width:100%;
}
.text{
float:left;
width:50%;
}
.imageupload{
float:left;
width:50%;
}
.bgcolor span,.txtcolor span{
width:40px;
height:40px;
display:inline-block;
margin:5px;
border: 1px solid #000;
}
}
</style>
<script>
$( document ).ready(function() {
var screen = new fabric.Canvas('mainscreen');
screen.setHeight(360);
screen.setWidth(600);
fabric.Image.fromURL('image/shirt.png', function(oImg) {
oImg.width = 298;
oImg.height = 360;
oImg.set('selectable', false);
screen.add(oImg);
screen.centerObject(oImg);
bg = screen.item(0);
bg.filters.length = 0;
bg.filters.push(new fabric.Image.filters.Tint({
color: 'white',
opacity: 0.6
}));
bg.applyFilters(screen.renderAll.bind(screen));
});
// loop ใส่สีให้ กับ ปุ่มเลือกสีเสื้อ
$.each( $(".bgcolor span") , function( ) {
var className = $(this).attr('class');
$(".bgcolor ."+className).css("background",className);
});
// loop ใส่สีให้ กับ ปุ่มเลือกสีตัวอักษร
$.each( $(".txtcolor span") , function( ) {
var className = $(this).attr('class');
$(".txtcolor ."+className).css("background",className);
});
// save รูปที่แต่งแล้ว
$( ".save" ).click(function() {
screen.deactivateAll().renderAll();
window.open(screen.toDataURL('png'));
});
// event การเลือกสีเสื้อ
$( ".bgcolor span" ).click(function() {
var color = $(this).attr('class');
bg = screen.item(0);
bg.filters.length = 0;
bg.filters.push(new fabric.Image.filters.Tint({
color: color,
opacity: .5
}));
bg.applyFilters(screen.renderAll.bind(screen));
});
// event การเลือกสีตัวอักษร
$( ".txtcolor span" ).click(function() {
var color = $(this).attr('class');
var obtxt = screen.getActiveObject();
if(obtxt){
obtxt.setColor( color );
screen.renderAll();
}else{
alert("กรุณาเลือกตัวอักษรที่ต้องการเปลี่ยนสี");
}
});
// event ในเการเพิ่มรูปภาพ
$( "#imagebroswer" ).change(function() {
var e = $(this);
var reader = new FileReader();
reader.onload = function (event){
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
image.set({
angle: 0,
});
screen.centerObject(image);
screen.add(image);
screen.renderAll();
}
}
reader.readAsDataURL(e[0].files[0]);
});
// กดปุ่ม delete
$('body').keyup(function(e){
if(e.keyCode == 46) {
var activeObject = screen.getActiveObject();
screen.remove(activeObject);
}
});
$( ".addtxt" ).click(function() {
var txt = $(".txt").val();
var obtext = new fabric.Text(txt, { fontSize: 20 });
screen.centerObject(obtext);
screen.add(obtext);
screen.renderAll();
$(".txt").val("");
});
});
</script>
</head>
<body>
<div class="content">
<div class="bgcolor" style="padding:15px;text-align:center">
<div ><strong>เปลี่ยนสีเสื้อ</strong></div>
<span class="white"></span>
<span class="red"></span>
<span class="green"></span>
<span class="blue"></span>
<span class="black"></span>
</div>
<canvas id="mainscreen"></canvas>
<div style="padding:15px;text-align:center" class="clear:both;">
<i>หากต้องการลบ เลือก object และกด delete</i>
</div>
<div class="text">
<div><strong>เพิ่ม ตัวอักษร</strong></div>
<input type="text" class="txt"><input type="button" class="addtxt" name="เพิ่ม" value="เพิ่ม">
<div><strong>เปลี่ยนสีตัวอักษร</strong></div>
<div class="txtcolor">
<span class="white"></span>
<span class="red"></span>
<span class="green"></span>
<span class="blue"></span>
<span class="black"></span>
</div>
</div>
<div class="imageupload">
<div ><strong>เพิ่มรูปภาพ</strong></div>
<input id="imagebroswer" type="file">
</div>
<div class="save" style="padding:5px 15px;text-align:center;color:#fff;background:red;clear:both;margin:20px 0 0 0;">
บันทึกรูปภาพ
</div>
</div>
</body>
</html>
Tag : PHP
|
|
|
 |
 |
 |
 |
| Date :
2017-07-14 00:14:19 |
By :
1427487567274575 |
View :
741 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
เก็บรูป
1. upload รูปใหม่ ชื่อใหม่ ขึ้น server เก็บชื่อใหม่ลง database ไม่สนชื่อเก่า
หรือ
2. ทำรูปเสร็จ upload รูปใหม่ชื่อเดิม เอาไปทับรูปเก่า
ส่วนการอัพรูปหาดูมีอยู่ หาหน่อย
|
| |
|
|
| |
| Date :
2017-07-14 05:50:45 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
