Il linguaggio JavaScript
 

problema con un imput javascript e php ridimensionamento immagine da client

Enrico Maria Chellini 11 Dic 2015 19:58
allora sto cercando di fare uno ridimensionamento immagine da client per poi
immagazzinare le informazioni in un database tramite php.

cosa faccio:
ho bisogno dei valori delle variabili $imgcampo e $id nella parte finale

<div>
<input name= ******* type= ******* />
<input name="imgcampop" type="text" value="<?php
echo $imgcampo; ?>"/>
<input name="idp" type="text" value="<?php echo $id;
?>"/>
<u>Choose ******* /u>
<p><span></span></p>
<i></i>
</div>
<script>

$().ready(function() {

$('#area u').click(function() {
$('input[name ******* ').trigger('click');

});

$('input[name ******* ').change(function(e) {
var ******* = e.target.files[0];

// RESET
$('#area p span').css('width', 0 +
"%").html('');
$('#area img, #area canvas').remove();
$('#area
i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));

// CANVAS RESIZING
canvasResize ******* {
width: 960,
height: 700,
crop: false,
quality: 80,
rotate: 0,
callback: function(data, width, height)
{

// SHOW AS AN IMAGE
//
=================================================
var img = new Image();
img.onload = function() {

$(this).css({
'margin': '10px auto',
'width': width,
'height': height
}).appendTo('#area div');

};
$(img).attr('src', data);

// /SHOW AS AN IMAGE
//
=================================================


// IMAGE UPLOADING
//
=================================================

// Create a new formdata
var fd = new FormData();
// Add ******* data
var f =
canvasResize('dataURLtoBlob', data);
f.name = ******* name;
fd.append($('#area
input').attr('name'), f);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'uploader.php',
true);
xhr.setRequestHeader("X-Requested-
With", "XMLHttpRequest");
xhr.setRequestHeader("pragma", "no-
cache");
//Upload progress
xhr.upload.addEventListener("progress",
function(e) {
if (e.lengthComputable) {
var loaded =
Math.ceil((e.loaded / e.total) * 100);
$('#area p span').css({
'width': loaded + "%"
}).html(loaded + "%");
}
}, false);
// ******* uploaded
xhr.addEventListener("load",
function(e) {
var response =
JSON.parse(e.target.responseText);
if (response.filename) {
// Complete
$('#area p
span').html('done');
$('#area
b').html(response.filename);
$('<img>').attr({
'src': response.filename
}).appendTo($('#area div'));
}
}, false);
// Send data
xhr.send(fd);


// /IMAGE UPLOADING
//
=================================================
}
});

});
});
</script>
<script>

$().ready(function() {

$('#area u').click(function() {
$('input[name ******* ').trigger('click');

});

$('input[name ******* ').change(function(e) {
var ******* = e.target.files[0];

// RESET
$('#area p span').css('width', 0 +
"%").html('');
$('#area img, #area canvas').remove();
$('#area
i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));

// CANVAS RESIZING
canvasResize ******* {
width: 350,
height: 200,
crop: false,
quality: 80,
rotate: 0,
callback: function(data, width, height)
{

// SHOW AS AN IMAGE
//
=================================================
var img = new Image();
img.onload = function() {

$(this).css({
'margin': '10px auto',
'width': width,
'height': height
}).appendTo('#area div');

};
$(img).attr('src', data);

// /SHOW AS AN IMAGE
//
=================================================


// IMAGE UPLOADING
//
=================================================

// Create a new formdata
var fd = new FormData();
// Add ******* data
var f =
canvasResize('dataURLtoBlob', data);
f.name = ******* name;
fd.append($('#area
input').attr('name'), f);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'uploader_tmb.php',
true);
xhr.setRequestHeader("X-Requested-
With", "XMLHttpRequest");
xhr.setRequestHeader("pragma", "no-
cache");
//Upload progress
xhr.upload.addEventListener("progress",
function(e) {
if (e.lengthComputable) {
var loaded =
Math.ceil((e.loaded / e.total) * 100);
$('#area p span').css({
'width': loaded + "%"
}).html(loaded + "%");
}
}, false);
// ******* uploaded
xhr.addEventListener("load",
function(e) {
var response =
JSON.parse(e.target.responseText);
if (response.filename) {
// Complete
$('#area p
span').html('done');
$('#area
b').html(response.filename);
$('<img>').attr({
'src': response.filename
}).appendTo($('#area div'));
}
}, false);
// Send data
xhr.send(fd);

// /IMAGE UPLOADING
//
=================================================
}
});

});
});
</script>


<script src="binaryajax.js"></script>
<script src="exif.js"></script>
<script src="canvasResize.js"></script>
</div>
<div class="clearfix"></div>
//////////////////////////////////
POI nell ******* uploader.php e uploader_tmb.php
///////////////




/*
// LOG
$log = '=== ' . @date('Y-m-d H:i:s') . ' ==============================='
. "\n"
. 'FILES:' . print_r($_FILES, 1) . "\n"
. 'POST:' . print_r($_POST, 1) . "\n";
$fp = fopen('upload-log.txt', 'a');
fwrite($fp, $log);
fclose($fp);
*/

// Result object
$r = new stdClass();
// no-cache (important for mobile safari)
header('cache-control: no-cache');
// Result content type
header('content-type: application/json');
/////////////////////////////////////////////////////////////////////
// qui avrei bisogno dei valori delle variabili per nominare il ******* e
successivamente fare la query per il database
//////////////////////////////////////////////
$imgcampop=$_POST['imgcampop'];
$idp=$_POST['idp'];
$immagp= "img".$imgcampop."-".$idp;
echo $immagp;

// Maximum ******* size
$maxsize = 1; //Mb
// ******* size control
if ($_FILES[ ******* ]['size'] > ($maxsize * 1048576)) {

$r->error = "Error: Max ******* size: $maxsize Kb";
}

// If the ******* is an image
if (preg_match('/image/i', $_FILES[ ******* ]['type'])) {

$filename = 'uploads_tmb/' .$immagp. '.jpg';
} else {

$r->error = "Error: Only image files";
}

// Supporting image ******* types
$types = Array('image/png', 'image/gif', 'image/jpeg');
// ******* type control
if (in_array($_FILES[ ******* ]['type'], $types)) {
// Create an unique ******* name
// Uploaded ******* source
$source = ******* get_contents($_FILES[ ******* ]["tmp_name"]);
// Image resize
imageresize($source, $filename);
} else {
// If the ******* is not an image
$r->error = "Error: this is not an image ******* ;
return false;
}

// ******* path
$path = str_replace('uploader.php', '', $_SERVER['SCRIPT_NAME']);

// Result data
$r->filename = $filename;
$r->path = $path;
$r->img = '<img src="' . $r->path . $r->filename . '" alt="image" />';

// Return to JSON
echo json_encode($r);

// Image resize function with php + gd2 lib
function imageresize($source, $destination, $width = 0, $height = 0, $crop =
false, $quality = 80) {
$quality = $quality ? $quality : 80;
$image = imagecreatefromstring($source);
if ($image) {
// Get dimensions
$w = imagesx($image);
$h = imagesy($image);
//die(json_encode(array('width' => $w, 'height' => $h)));
if (($width && $w > $width) || ($height && $h > $height)) {
$ratio = $w / $h;
if (($ratio >= 1 || $height == 0) && $width && !$crop) {
$new_height = $width / $ratio;
$new_width = $width;
} elseif ($crop && $ratio <= ($width / $height)) {
$new_height = $width / $ratio;
$new_width = $width;
} else {
$new_width = $height * $ratio;
$new_height = $height;
}
} else {
$new_width = $w;
$new_height = $h;
}
$x_mid = $new_width * .5; //horizontal middle
$y_mid = $new_height * .5; //vertical middle
// Resample
error_log('height: ' . $new_height . ' - width: ' . $new_width);
$new = imagecreatetruecolor(floor($new_width), floor($new_height));
$x = 0;
if ($new_width > $new_height) {
//$new_height = $new_height *8;
} else {
//$x = -$new_width * 7;
//$new_width = $new_width *8;
}
imagecopyresampled($new, $image, 0, 0, $x, 0, $new_width,
$new_height, $w, $h);
// Crop
if ($crop) {
$crop = imagecreatetruecolor($width ? $width : $new_width,
$height ? $height : $new_height);
imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)),
0, $width, $height, $width, $height);
//($y_mid - ($height * .5))
}
// Output
// Enable interlancing [for progressive JPEG]
imageinterlace($crop ? $crop : $new, true);

$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
if ($dext == '') {
$dext = $ext;
$destination .= '.' . $ext;
}
switch ($dext) {
case 'jpeg':
case 'jpg':
imagejpeg($crop ? $crop : $new, $destination, $quality);
break;
case 'png':
$pngQuality = ($quality - 100) / 11.111111;
$pngQuality = round(abs($pngQuality));
imagepng($crop ? $crop : $new, $destination, $pngQuality);
break;
case 'gif':
imagegif($crop ? $crop : $new, $destination);
break;
}
@imagedestroy($image);
@imagedestroy($new);
@imagedestroy($crop);
}
}

?>

Links
Giochi online
Dizionario sinonimi
Leggi e codici
Ricette
Testi
Webmatica
Hosting gratis
   
 

Il linguaggio JavaScript | Tutti i gruppi | it.comp.lang.javascript | Notizie e discussioni javascript | Javascript Mobile | Servizio di consultazione news.