Note :- Add /jquery-1.10.2.min.js ,jquery.Jcrop.js and
//HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Js files-->
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>
</head>
<body>
<form id="ForumBlogAddForm" accept-charset="utf-8" method="post" enctype="multipart/form-data" >
<div class="simple-cropper-images">
<div class="cropme" style="width: 405px; height: 200px;"> </div>
<div class="cropme" style="width: 205px; height: 200px;"> </div>
<input type="hidden" id="blhas" name="src" />
<input type="hidden" id="blhasat" name="srcsaty" />
<div class="clear"></div>
<input type="submit" name="submit" value="Ok" class="btn btn-large btn-inverse" />
</form>
<script>
// Init Simple Cropper
$('.cropme').simpleCroppersatya();
</script>
</div>
</body>
</html>
//**************** CSS
#fileInput{
width:0;
height:0;
overflow:hidden;
}
#modal{
z-index: 10;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #5F5F5F;
opacity: 0.95;
display: none;
}
#preview{
z-index: 11;
position: fixed;
top: 0px;
left: 0px;
display: none;
border: 4px solid #A5A2A2;
border-radius: 4px;
float: left;
font-size: 0px;
line-height: 0px;
}
#preview .buttons{
width: 36px;
position: absolute;
bottom:0px;
right: -44px;
}
#preview .buttons .ok{
border: 4px solid #F5F5F5;
border-radius: 4px;
width: 28px;
height: 28px;
line-height: 0px;
font-size: 0px;
background-image: url('../images/Ok.png');
background-repeat: no-repeat;
}
#preview .buttons .ok:hover{
background-image: url('../images/OkGreen.png');
}
#preview .buttons .cancel{
margin-bottom: 4px;
border: 4px solid #F5F5F5;
border-radius: 4px;
width: 28px;
height: 28px;
line-height: 0px;
font-size: 0px;
background-image: url('../images/Cancel.png');
background-repeat: no-repeat;
}
#preview .buttons .cancel:hover{
background-image: url('../images/CancelRed.png');
}
.clear{
font-size: 0px;
line-height: 0px;
overflow: hidden;
width: 0px;
height: 0px;
clear: both;
}
h1{
display: block;
font-family: arial;
font-size: 35px;
color: #39acac;
margin-bottom: 20px;
margin-top: 20px;
font-weight: bold;
}
h2{
display: block;
clear: both;
font-family: arial;
font-size: 25px;
color: #39acac;
margin-bottom: 20px;
font-weight: bold;
}
.simple-cropper-images{
width: 820px;
margin: 0 auto 20px;
}
.cropme{
float: left;
background-color: #f1f1f1;
margin-bottom: 5px;
margin-right: 5px;
background-image: url('../images/UploadLight.png');
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
.cropme:hover{
background-image: url('../images/UploadDark.png');
}
.text{
font-family: arial;
font-size: 14px;
color: #4e4e4e;
margin-bottom: 20px;
}
.code{
font-family: arial;
font-size: 14px;
color: #4e4e4e;
margin-bottom: 20px;
background-color: #f1f1f1;
padding: 10px;
}
.jcrop-holder {
direction: ltr;
text-align: left;
}
/* Selection Border */
.jcrop-vline,
.jcrop-hline {
background: #ffffff url("../images/Jcrop.gif");
font-size: 0;
position: absolute;
}
.jcrop-vline {
height: 100%;
width: 1px !important;
}
.jcrop-vline.right {
right: 0;
}
.jcrop-hline {
height: 1px !important;
width: 100%;
}
.jcrop-hline.bottom {
bottom: 0;
}
/* Invisible click targets */
.jcrop-tracker {
height: 100%;
width: 100%;
/* "turn off" link highlight */
-webkit-tap-highlight-color: transparent;
/* disable callout, image save panel */
-webkit-touch-callout: none;
/* disable cut copy paste */
-webkit-user-select: none;
}
/* Selection Handles */
.jcrop-handle {
background-color: #333333;
border: 1px #eeeeee solid;
width: 7px;
height: 7px;
font-size: 1px;
}
.jcrop-handle.ord-n {
left: 50%;
margin-left: -4px;
margin-top: -4px;
top: 0;
}
.jcrop-handle.ord-s {
bottom: 0;
left: 50%;
margin-bottom: -4px;
margin-left: -4px;
}
.jcrop-handle.ord-e {
margin-right: -4px;
margin-top: -4px;
right: 0;
top: 50%;
}
.jcrop-handle.ord-w {
left: 0;
margin-left: -4px;
margin-top: -4px;
top: 50%;
}
.jcrop-handle.ord-nw {
left: 0;
margin-left: -4px;
margin-top: -4px;
top: 0;
}
.jcrop-handle.ord-ne {
margin-right: -4px;
margin-top: -4px;
right: 0;
top: 0;
}
.jcrop-handle.ord-se {
bottom: 0;
margin-bottom: -4px;
margin-right: -4px;
right: 0;
}
.jcrop-handle.ord-sw {
bottom: 0;
left: 0;
margin-bottom: -4px;
margin-left: -4px;
}
/* Dragbars */
.jcrop-dragbar.ord-n,
.jcrop-dragbar.ord-s {
height: 7px;
width: 100%;
}
.jcrop-dragbar.ord-e,
.jcrop-dragbar.ord-w {
height: 100%;
width: 7px;
}
.jcrop-dragbar.ord-n {
margin-top: -4px;
}
.jcrop-dragbar.ord-s {
bottom: 0;
margin-bottom: -4px;
}
.jcrop-dragbar.ord-e {
margin-right: -4px;
right: 0;
}
.jcrop-dragbar.ord-w {
margin-left: -4px;
}
/* The "jcrop-light" class/extension */
.jcrop-light .jcrop-vline,
.jcrop-light .jcrop-hline {
background: #ffffff;
filter: alpha(opacity=70) !important;
opacity: .70!important;
}
.jcrop-light .jcrop-handle {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #000000;
border-color: #ffffff;
border-radius: 3px;
}
/* The "jcrop-dark" class/extension */
.jcrop-dark .jcrop-vline,
.jcrop-dark .jcrop-hline {
background: #000000;
filter: alpha(opacity=70) !important;
opacity: 0.7 !important;
}
.jcrop-dark .jcrop-handle {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #ffffff;
border-color: #000000;
border-radius: 3px;
}
/* Simple macro to turn off the antlines */
.solid-line .jcrop-vline,
.solid-line .jcrop-hline {
background: #ffffff;
}
/* Fix for twitter bootstrap et al. */
.jcrop-holder img,
img.jcrop-preview {
max-width: none;
}
//*******************************Java Scrip
/**
Author : kumar satyam
Mail : <satyam@sheroes.in>
*/
(function ($) {
$.fn.simpleCroppersatya = function (onComplete) {
var image_dimension_x = 600;
var image_dimension_y = 600;
var scaled_width = 0;
var scaled_height = 0;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var current_image = null;
var image_filename = null;
var aspX = 1;
var aspY = 1;
var file_display_area = null;
var ias = null;
var original_data = null;
var jcrop_api;
var bottom_html = "<input type='file' id='fileInput' name='files[]'/ accept='image/*'><canvas id='myCanvas' style='display:none;'></canvas><div id='modal'></div><div id='preview'><div class='buttons'><div class='cancel'></div><div class='ok'></div></div></div>";
$('body').append(bottom_html);
//add click to element
this.click(function () {
aspX = $(this).width();
aspY = $(this).height();
file_display_area = $(this);
$('#fileInput').click();
});
$(document).ready(function () {
//capture selected filename
$('#fileInput').change(function (click) {
imageUpload($('#preview').get(0));
// Reset input value
$(this).val("");
});
//ok listener
$('.ok').click(function () {
preview();
$('#preview').delay(100).hide();
$('#modal').hide();
jcrop_api.destroy();
reset();
});
//cancel listener
$('.cancel').click(function (event) {
$('#preview').delay(100).hide();
$('#modal').hide();
jcrop_api.destroy();
reset();
});
});
function reset() {
scaled_width = 0;
scaled_height = 0;
x1 = 0;
y1 = 0;
x2 = 0;
y2 = 0;
current_image = null;
image_filename = null;
original_data = null;
aspX = 1;
aspY = 1;
file_display_area = null;
}
function imageUpload(dropbox) {
var file = $("#fileInput").get(0).files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
image_filename = file.name;
reader.onload = function (e) {
// Clear the current image.
$('#photo').remove();
original_data = reader.result;
// Create a new image with image crop functionality
current_image = new Image();
current_image.src = reader.result;
current_image.id = "photo";
current_image.style['maxWidth'] = image_dimension_x + 'px';
current_image.style['maxHeight'] = image_dimension_y + 'px';
current_image.onload = function () {
// Calculate scaled image dimensions
if (current_image.width > image_dimension_x || current_image.height > image_dimension_y) {
if (current_image.width > current_image.height) {
scaled_width = image_dimension_x;
scaled_height = image_dimension_x * current_image.height / current_image.width;
}
if (current_image.width < current_image.height) {
scaled_height = image_dimension_y;
scaled_width = image_dimension_y * current_image.width / current_image.height;
}
if (current_image.width == current_image.height) {
scaled_width = image_dimension_x;
scaled_height = image_dimension_y;
}
}
else {
scaled_width = current_image.width;
scaled_height = current_image.height;
}
// set the image size to the scaled proportions which is required for at least IE11
current_image.style['width'] = scaled_width + 'px';
current_image.style['height'] = scaled_height + 'px';
// Position the modal div to the center of the screen
$('#modal').css('display', 'block');
var window_width = $(window).width() / 2 - scaled_width / 2 + "px";
var window_height = $(window).height() / 2 - scaled_height / 2 + "px";
// Show image in modal view
$("#preview").css("top", window_height);
$("#preview").css("left", window_width);
$('#preview').show(500);
// Calculate selection rect
var selection_width = 0;
var selection_height = 0;
var max_x = Math.floor(scaled_height * aspX / aspY);
var max_y = Math.floor(scaled_width * aspY / aspX);
if (max_x > scaled_width) {
selection_width = scaled_width;
selection_height = max_y;
}
else {
selection_width = max_x;
selection_height = scaled_height;
}
ias = $(this).Jcrop({
onSelect: showCoords,
onChange: showCoords,
bgColor: '#747474',
bgOpacity: .4,
aspectRatio: aspX / aspY,
setSelect: [0, 0, selection_width, selection_height]
}, function () {
jcrop_api = this;
});
}
// Add image to dropbox element
dropbox.appendChild(current_image);
}
reader.readAsDataURL(file);
} else {
dropbox.innerHTML = "File not supported!";
}
}
function showCoords(c) {
x1 = c.x;
y1 = c.y;
x2 = c.x2;
y2 = c.y2;
}
function preview() {
// Set canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Delete previous image on canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Set selection width and height
var sw = x2 - x1;
var sh = y2 - y1;
// Set image original width and height
var imgWidth = current_image.naturalWidth;
var imgHeight = current_image.naturalHeight;
// Set selection koeficient
var kw = imgWidth / $("#preview").width();
var kh = imgHeight / $("#preview").height();
// Set canvas width and height and draw selection on it
canvas.width = aspX;
canvas.height = aspY;
context.drawImage(current_image, (x1 * kw), (y1 * kh), (sw * kw), (sh * kh), 0, 0, aspX, aspY);
// Convert canvas image to normal img
var dataUrl = canvas.toDataURL();
var imageFoo = document.createElement('img');
imageFoo.src = dataUrl;
if(aspX=="405") {
$('#blhas').attr('value',dataUrl);
}
else if(aspX=="205") {
$('#blhasat').attr('value',dataUrl);
}
// Append it to the body element
$('#preview').delay(100).hide();
$('#modal').hide();
file_display_area.html('');
file_display_area.append(imageFoo);
if (onComplete) onComplete(
{
"original": { "filename": image_filename, "base64": original_data, "width": current_image.width, "height": current_image.height },
"crop": { "x": (x1 * kw), "y": (y1 * kh), "width": (sw * kw), "height": (sh * kh) }
}
);
}
$(window).resize(function () {
// Position the modal div to the center of the screen
var window_width = $(window).width() / 2 - scaled_width / 2 + "px";
var window_height = $(window).height() / 2 - scaled_height / 2 + "px";
// Show image in modal view
$("#preview").css("top", window_height);
$("#preview").css("left", window_width);
});
}
}(jQuery));
//***********************PHP
<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db('test', $conn);
if(isset($_POST['submit']))
{
print_r($_POST); die();
$img = $_POST['src']; // Your data 'data:image/png;base64,AAAFBfj42Pj4';
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$fileName=time()."user_name";
$filesqlname=$fileName.'png';
//upload Folder name
file_put_contents("upload/".$fileName.".png", $data);
mysql_query("insert into image set src='$filesqlname'");
}
?>
//HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Js files-->
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>
</head>
<body>
<form id="ForumBlogAddForm" accept-charset="utf-8" method="post" enctype="multipart/form-data" >
<div class="simple-cropper-images">
<div class="cropme" style="width: 405px; height: 200px;"> </div>
<div class="cropme" style="width: 205px; height: 200px;"> </div>
<input type="hidden" id="blhas" name="src" />
<input type="hidden" id="blhasat" name="srcsaty" />
<div class="clear"></div>
<input type="submit" name="submit" value="Ok" class="btn btn-large btn-inverse" />
</form>
<script>
// Init Simple Cropper
$('.cropme').simpleCroppersatya();
</script>
</div>
</body>
</html>
//**************** CSS
#fileInput{
width:0;
height:0;
overflow:hidden;
}
#modal{
z-index: 10;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #5F5F5F;
opacity: 0.95;
display: none;
}
#preview{
z-index: 11;
position: fixed;
top: 0px;
left: 0px;
display: none;
border: 4px solid #A5A2A2;
border-radius: 4px;
float: left;
font-size: 0px;
line-height: 0px;
}
#preview .buttons{
width: 36px;
position: absolute;
bottom:0px;
right: -44px;
}
#preview .buttons .ok{
border: 4px solid #F5F5F5;
border-radius: 4px;
width: 28px;
height: 28px;
line-height: 0px;
font-size: 0px;
background-image: url('../images/Ok.png');
background-repeat: no-repeat;
}
#preview .buttons .ok:hover{
background-image: url('../images/OkGreen.png');
}
#preview .buttons .cancel{
margin-bottom: 4px;
border: 4px solid #F5F5F5;
border-radius: 4px;
width: 28px;
height: 28px;
line-height: 0px;
font-size: 0px;
background-image: url('../images/Cancel.png');
background-repeat: no-repeat;
}
#preview .buttons .cancel:hover{
background-image: url('../images/CancelRed.png');
}
.clear{
font-size: 0px;
line-height: 0px;
overflow: hidden;
width: 0px;
height: 0px;
clear: both;
}
h1{
display: block;
font-family: arial;
font-size: 35px;
color: #39acac;
margin-bottom: 20px;
margin-top: 20px;
font-weight: bold;
}
h2{
display: block;
clear: both;
font-family: arial;
font-size: 25px;
color: #39acac;
margin-bottom: 20px;
font-weight: bold;
}
.simple-cropper-images{
width: 820px;
margin: 0 auto 20px;
}
.cropme{
float: left;
background-color: #f1f1f1;
margin-bottom: 5px;
margin-right: 5px;
background-image: url('../images/UploadLight.png');
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
.cropme:hover{
background-image: url('../images/UploadDark.png');
}
.text{
font-family: arial;
font-size: 14px;
color: #4e4e4e;
margin-bottom: 20px;
}
.code{
font-family: arial;
font-size: 14px;
color: #4e4e4e;
margin-bottom: 20px;
background-color: #f1f1f1;
padding: 10px;
}
.jcrop-holder {
direction: ltr;
text-align: left;
}
/* Selection Border */
.jcrop-vline,
.jcrop-hline {
background: #ffffff url("../images/Jcrop.gif");
font-size: 0;
position: absolute;
}
.jcrop-vline {
height: 100%;
width: 1px !important;
}
.jcrop-vline.right {
right: 0;
}
.jcrop-hline {
height: 1px !important;
width: 100%;
}
.jcrop-hline.bottom {
bottom: 0;
}
/* Invisible click targets */
.jcrop-tracker {
height: 100%;
width: 100%;
/* "turn off" link highlight */
-webkit-tap-highlight-color: transparent;
/* disable callout, image save panel */
-webkit-touch-callout: none;
/* disable cut copy paste */
-webkit-user-select: none;
}
/* Selection Handles */
.jcrop-handle {
background-color: #333333;
border: 1px #eeeeee solid;
width: 7px;
height: 7px;
font-size: 1px;
}
.jcrop-handle.ord-n {
left: 50%;
margin-left: -4px;
margin-top: -4px;
top: 0;
}
.jcrop-handle.ord-s {
bottom: 0;
left: 50%;
margin-bottom: -4px;
margin-left: -4px;
}
.jcrop-handle.ord-e {
margin-right: -4px;
margin-top: -4px;
right: 0;
top: 50%;
}
.jcrop-handle.ord-w {
left: 0;
margin-left: -4px;
margin-top: -4px;
top: 50%;
}
.jcrop-handle.ord-nw {
left: 0;
margin-left: -4px;
margin-top: -4px;
top: 0;
}
.jcrop-handle.ord-ne {
margin-right: -4px;
margin-top: -4px;
right: 0;
top: 0;
}
.jcrop-handle.ord-se {
bottom: 0;
margin-bottom: -4px;
margin-right: -4px;
right: 0;
}
.jcrop-handle.ord-sw {
bottom: 0;
left: 0;
margin-bottom: -4px;
margin-left: -4px;
}
/* Dragbars */
.jcrop-dragbar.ord-n,
.jcrop-dragbar.ord-s {
height: 7px;
width: 100%;
}
.jcrop-dragbar.ord-e,
.jcrop-dragbar.ord-w {
height: 100%;
width: 7px;
}
.jcrop-dragbar.ord-n {
margin-top: -4px;
}
.jcrop-dragbar.ord-s {
bottom: 0;
margin-bottom: -4px;
}
.jcrop-dragbar.ord-e {
margin-right: -4px;
right: 0;
}
.jcrop-dragbar.ord-w {
margin-left: -4px;
}
/* The "jcrop-light" class/extension */
.jcrop-light .jcrop-vline,
.jcrop-light .jcrop-hline {
background: #ffffff;
filter: alpha(opacity=70) !important;
opacity: .70!important;
}
.jcrop-light .jcrop-handle {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #000000;
border-color: #ffffff;
border-radius: 3px;
}
/* The "jcrop-dark" class/extension */
.jcrop-dark .jcrop-vline,
.jcrop-dark .jcrop-hline {
background: #000000;
filter: alpha(opacity=70) !important;
opacity: 0.7 !important;
}
.jcrop-dark .jcrop-handle {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #ffffff;
border-color: #000000;
border-radius: 3px;
}
/* Simple macro to turn off the antlines */
.solid-line .jcrop-vline,
.solid-line .jcrop-hline {
background: #ffffff;
}
/* Fix for twitter bootstrap et al. */
.jcrop-holder img,
img.jcrop-preview {
max-width: none;
}
//*******************************Java Scrip
/**
Author : kumar satyam
Mail : <satyam@sheroes.in>
*/
(function ($) {
$.fn.simpleCroppersatya = function (onComplete) {
var image_dimension_x = 600;
var image_dimension_y = 600;
var scaled_width = 0;
var scaled_height = 0;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var current_image = null;
var image_filename = null;
var aspX = 1;
var aspY = 1;
var file_display_area = null;
var ias = null;
var original_data = null;
var jcrop_api;
var bottom_html = "<input type='file' id='fileInput' name='files[]'/ accept='image/*'><canvas id='myCanvas' style='display:none;'></canvas><div id='modal'></div><div id='preview'><div class='buttons'><div class='cancel'></div><div class='ok'></div></div></div>";
$('body').append(bottom_html);
//add click to element
this.click(function () {
aspX = $(this).width();
aspY = $(this).height();
file_display_area = $(this);
$('#fileInput').click();
});
$(document).ready(function () {
//capture selected filename
$('#fileInput').change(function (click) {
imageUpload($('#preview').get(0));
// Reset input value
$(this).val("");
});
//ok listener
$('.ok').click(function () {
preview();
$('#preview').delay(100).hide();
$('#modal').hide();
jcrop_api.destroy();
reset();
});
//cancel listener
$('.cancel').click(function (event) {
$('#preview').delay(100).hide();
$('#modal').hide();
jcrop_api.destroy();
reset();
});
});
function reset() {
scaled_width = 0;
scaled_height = 0;
x1 = 0;
y1 = 0;
x2 = 0;
y2 = 0;
current_image = null;
image_filename = null;
original_data = null;
aspX = 1;
aspY = 1;
file_display_area = null;
}
function imageUpload(dropbox) {
var file = $("#fileInput").get(0).files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
image_filename = file.name;
reader.onload = function (e) {
// Clear the current image.
$('#photo').remove();
original_data = reader.result;
// Create a new image with image crop functionality
current_image = new Image();
current_image.src = reader.result;
current_image.id = "photo";
current_image.style['maxWidth'] = image_dimension_x + 'px';
current_image.style['maxHeight'] = image_dimension_y + 'px';
current_image.onload = function () {
// Calculate scaled image dimensions
if (current_image.width > image_dimension_x || current_image.height > image_dimension_y) {
if (current_image.width > current_image.height) {
scaled_width = image_dimension_x;
scaled_height = image_dimension_x * current_image.height / current_image.width;
}
if (current_image.width < current_image.height) {
scaled_height = image_dimension_y;
scaled_width = image_dimension_y * current_image.width / current_image.height;
}
if (current_image.width == current_image.height) {
scaled_width = image_dimension_x;
scaled_height = image_dimension_y;
}
}
else {
scaled_width = current_image.width;
scaled_height = current_image.height;
}
// set the image size to the scaled proportions which is required for at least IE11
current_image.style['width'] = scaled_width + 'px';
current_image.style['height'] = scaled_height + 'px';
// Position the modal div to the center of the screen
$('#modal').css('display', 'block');
var window_width = $(window).width() / 2 - scaled_width / 2 + "px";
var window_height = $(window).height() / 2 - scaled_height / 2 + "px";
// Show image in modal view
$("#preview").css("top", window_height);
$("#preview").css("left", window_width);
$('#preview').show(500);
// Calculate selection rect
var selection_width = 0;
var selection_height = 0;
var max_x = Math.floor(scaled_height * aspX / aspY);
var max_y = Math.floor(scaled_width * aspY / aspX);
if (max_x > scaled_width) {
selection_width = scaled_width;
selection_height = max_y;
}
else {
selection_width = max_x;
selection_height = scaled_height;
}
ias = $(this).Jcrop({
onSelect: showCoords,
onChange: showCoords,
bgColor: '#747474',
bgOpacity: .4,
aspectRatio: aspX / aspY,
setSelect: [0, 0, selection_width, selection_height]
}, function () {
jcrop_api = this;
});
}
// Add image to dropbox element
dropbox.appendChild(current_image);
}
reader.readAsDataURL(file);
} else {
dropbox.innerHTML = "File not supported!";
}
}
function showCoords(c) {
x1 = c.x;
y1 = c.y;
x2 = c.x2;
y2 = c.y2;
}
function preview() {
// Set canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Delete previous image on canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Set selection width and height
var sw = x2 - x1;
var sh = y2 - y1;
// Set image original width and height
var imgWidth = current_image.naturalWidth;
var imgHeight = current_image.naturalHeight;
// Set selection koeficient
var kw = imgWidth / $("#preview").width();
var kh = imgHeight / $("#preview").height();
// Set canvas width and height and draw selection on it
canvas.width = aspX;
canvas.height = aspY;
context.drawImage(current_image, (x1 * kw), (y1 * kh), (sw * kw), (sh * kh), 0, 0, aspX, aspY);
// Convert canvas image to normal img
var dataUrl = canvas.toDataURL();
var imageFoo = document.createElement('img');
imageFoo.src = dataUrl;
if(aspX=="405") {
$('#blhas').attr('value',dataUrl);
}
else if(aspX=="205") {
$('#blhasat').attr('value',dataUrl);
}
// Append it to the body element
$('#preview').delay(100).hide();
$('#modal').hide();
file_display_area.html('');
file_display_area.append(imageFoo);
if (onComplete) onComplete(
{
"original": { "filename": image_filename, "base64": original_data, "width": current_image.width, "height": current_image.height },
"crop": { "x": (x1 * kw), "y": (y1 * kh), "width": (sw * kw), "height": (sh * kh) }
}
);
}
$(window).resize(function () {
// Position the modal div to the center of the screen
var window_width = $(window).width() / 2 - scaled_width / 2 + "px";
var window_height = $(window).height() / 2 - scaled_height / 2 + "px";
// Show image in modal view
$("#preview").css("top", window_height);
$("#preview").css("left", window_width);
});
}
}(jQuery));
//***********************PHP
<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db('test', $conn);
if(isset($_POST['submit']))
{
print_r($_POST); die();
$img = $_POST['src']; // Your data 'data:image/png;base64,AAAFBfj42Pj4';
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$fileName=time()."user_name";
$filesqlname=$fileName.'png';
//upload Folder name
file_put_contents("upload/".$fileName.".png", $data);
mysql_query("insert into image set src='$filesqlname'");
}
?>
No comments :
Post a Comment