| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/imusiccircle/ |
Upload File : |
<?php
include('_init.php');
exit;
?>
<html>
<head>
<script src="js/jquery.min.js"></script>
<link href="js/cropper/cropper.css" rel="stylesheet">
<script src="js/cropper/cropper.js"></script>
<script type="text/javascript">
$(function () {
var $image = $('#image');
$(".crop_image").on("click", function () {
var canvas = $image.cropper('getCroppedCanvas');
var photo = canvas.toDataURL('image/jpeg');
$(this).closest(".crop_image_container").find("#cropped_img").attr("src", photo);
$(this).closest(".crop_image_container").find("#base64_img").attr("val", photo);
$(this).closest(".crop_image_container").find("#cropped_img_container").show();
$("#image_container").hide();
//console.log(photo);
});
var options = {
aspectRatio: 250 / 270,
autoCropArea: 0,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: true,
cropBoxResizable: false,
built: function () {
// Width and Height params are number types instead of string
$image.cropper("setCropBoxData", { width: 250, height: 270 });
}
/*crop: function (e) {
}*/
};
// Cropper
$image.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'cropstart.cropper': function (e) {
console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
console.log(e.type, e.action);
},
'crop.cropper': function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
},
'zoom.cropper': function (e) {
console.log(e.type, e.ratio);
}
}).cropper(options);
for(var i=1; i<=6; i++){
$("#inputImage_"+i).on("change", function () {
$("#image_container").show();
});
// Import image
crop_function($("#inputImage_"+i), $image);
}
});
function crop_function(_this, $image) {
var $inputImage = _this;
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
var img = new Image();
img.src = window.URL.createObjectURL( file );
img.onload = function() {
if(parseInt(img.width) > 1024 || parseInt(img.height) > 1024){
//window.alert('The resolution of image is too large. Please resize your image file under 1024px X 1024px.');
alert('圖片解析度過高，請將圖片縮放至少於1024px X 1024px。');
$image.cropper('reset');
$inputImage.val('');
}else{
$("#image_container").css("height", "500px");
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
// Revoke when load complete
URL.revokeObjectURL(blobURL);
}).cropper('reset').cropper('replace', blobURL);
$inputImage.val('');
}
}
} else {
window.alert('Please choose an image file.');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
}
</script>
<style>
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
</style>
</head>
<body>
<!-- Wrap the image or canvas element with a block element (container) -->
<div id="image_container" style="width: 100%;">
<div id="image"></div>
</div>
<?php for($i = 1; $i <= 6; $i++){ ?>
<div class="crop_image_container" style="margin-bottom: 10px;">
<input type="file" class="sr-only" id="inputImage_<?=$i?>" name="file" accept="image/*" style="width: 70px;">
<button type="button" class="crop_image" style="margin-left: 20px;">Crop Image</button>
<div id="cropped_img_container" style="display: none;">
<img src="" id="cropped_img" style="width: 200px;margin-top: 10px; border: 1px #ccc solid;"/>
<input type="hidden" name="base64_img" id="base64_img" value="">
</div>
</div>
<?php } ?>
</body>
</html>
<?php
function base64_to_image($base64_string, $output_file) {
$f = finfo_open();
$mime_type = finfo_buffer($f, $base64_string, FILEINFO_MIME_TYPE);
if($mime_type == "image/jpeg" || $mime_type == "image/png"){
$ifp = fopen($output_file, "wb");
$data = explode(',', $base64_string);
fwrite($ifp, base64_decode($data[1]));
fclose($ifp);
return $output_file;
}
}
$base64_string = "";
//base64_to_image($base64_string, "file/teacher/test111.jeg");