Tijden veranderen
[Jquery][php] wiskundig conflict
ik heb een cover knipper voor het maken van een langwerpige foto voor bovenaan de pagina. Maar bij het opslaan gaat het mis. Als je een url of een bestand selecteert komt er een vak over de foto te staan in het voorbeeld venster. dit kun je verschuiven over de foto. de coördinaten worden opgeslagen in de velden eronder.
bij het opslaan wordt de foto geüpload en de coördinaten doorgestuurd, php probeert opnieuw dit vak te maken maar houd rekening met de aspect ratio zodat het altijd dezelfde afmetingen heeft. Maar er gaat iets mis, de output is vaak zo dat het lijkt of de kader naar beneden is gezakt.
Jquery
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<div id="voorbeeld">
<?php
if(file_exists('hosting/movie/'.$movie['foto_token'].'/cover.jpg')) {
echo '<img id="crop_img" src="http://moviechecker.be/hosting/movie/'.$movie['foto_token'].'/cover.jpg?'.time().'" width="100%">';
} else {
echo '<img id="crop_img" src="http://moviechecker.be/hosting/movie/'.$movie['foto_token'].'/200.jpg" width="100%">';
}
?>
<div id="resizable"></div>
</div>
<div style="display:none;">
<input type="text" name="img_width" id="img_width"><br>
<input type="text" name="img_height" id="img_height"><br>
<input type="text" name="source_x" id="source_x"><br>
<input type="text" name="source_y" id="source_y"><br>
</div>
<script>
$(document).ready(function () {
<!-- inladen voorbeeld (exstern) -->
$("#poster_file").on('change', function() {
$("#poster_url").val("");
var input = this;
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#crop_img').attr("src", e.target.result);
$("#poster_voorbeeld").val(e.target.result);
add_window();
};
FR.readAsDataURL(input.files[0]);
}
});
$("#poster_url").on('change', function() {
$("#poster_file").val("");
var input = $(this).val();
$("#crop_img").attr("src", input)
$("#poster_voorbeeld").val(input);
add_window();
});
<!-- window invoegen -->
function add_window() {
var img_width = $('#crop_img').width();
var img_height = $('#crop_img').height();
var cover_width = '1200';
var cover_height = '375';
var drag_width = img_width;
var drag_height = cover_height / cover_width * drag_width;
$('#resizable').css('width', drag_width);
$('#resizable').css('height', drag_height);
$('#resizable').css('top', '0');
$('#resizable').css('left', '0');
}
<!-- Slepen-->
$("#resizable").draggable({ containment: "parent",
cursor: "move",
stop: function() {
$("#crop_img").css('opacity', '1')
var position = $('#resizable').position();
var position_img = $('#crop_img').position();
var w = $('#resizable').width();
$("#img_width").val(w)
var h = $('#resizable').height();
$("#img_height").val(h)
var x = position.left;
$("#source_x").val(x)
var y = position.top;
$("#source_y").val(y)
},
drag: function() {
$("#crop_img").css('opacity', '0.25');
var position = $('#resizable').position();
var position_img = $('#crop_img').position();
var w = $('#resizable').width();
$("#img_width").val(w)
var h = $('#resizable').height();
$("#img_height").val(h)
var x = position.left;
$("#source_x").val(x)
var y = position.top;
$("#source_y").val(y)
}
});
var img_width = $('#crop_img').width();
var img_height = $('#crop_img').height();
$("#parent_container").width(img_width);
$("#parent_container").height(img_height);
$('#crop_img').one('load',function() {
add_window();
});
});
</script>
<?php
if(file_exists('hosting/movie/'.$movie['foto_token'].'/cover.jpg')) {
echo '<img id="crop_img" src="http://moviechecker.be/hosting/movie/'.$movie['foto_token'].'/cover.jpg?'.time().'" width="100%">';
} else {
echo '<img id="crop_img" src="http://moviechecker.be/hosting/movie/'.$movie['foto_token'].'/200.jpg" width="100%">';
}
?>
<div id="resizable"></div>
</div>
<div style="display:none;">
<input type="text" name="img_width" id="img_width"><br>
<input type="text" name="img_height" id="img_height"><br>
<input type="text" name="source_x" id="source_x"><br>
<input type="text" name="source_y" id="source_y"><br>
</div>
<script>
$(document).ready(function () {
<!-- inladen voorbeeld (exstern) -->
$("#poster_file").on('change', function() {
$("#poster_url").val("");
var input = this;
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#crop_img').attr("src", e.target.result);
$("#poster_voorbeeld").val(e.target.result);
add_window();
};
FR.readAsDataURL(input.files[0]);
}
});
$("#poster_url").on('change', function() {
$("#poster_file").val("");
var input = $(this).val();
$("#crop_img").attr("src", input)
$("#poster_voorbeeld").val(input);
add_window();
});
<!-- window invoegen -->
function add_window() {
var img_width = $('#crop_img').width();
var img_height = $('#crop_img').height();
var cover_width = '1200';
var cover_height = '375';
var drag_width = img_width;
var drag_height = cover_height / cover_width * drag_width;
$('#resizable').css('width', drag_width);
$('#resizable').css('height', drag_height);
$('#resizable').css('top', '0');
$('#resizable').css('left', '0');
}
<!-- Slepen-->
$("#resizable").draggable({ containment: "parent",
cursor: "move",
stop: function() {
$("#crop_img").css('opacity', '1')
var position = $('#resizable').position();
var position_img = $('#crop_img').position();
var w = $('#resizable').width();
$("#img_width").val(w)
var h = $('#resizable').height();
$("#img_height").val(h)
var x = position.left;
$("#source_x").val(x)
var y = position.top;
$("#source_y").val(y)
},
drag: function() {
$("#crop_img").css('opacity', '0.25');
var position = $('#resizable').position();
var position_img = $('#crop_img').position();
var w = $('#resizable').width();
$("#img_width").val(w)
var h = $('#resizable').height();
$("#img_height").val(h)
var x = position.left;
$("#source_x").val(x)
var y = position.top;
$("#source_y").val(y)
}
});
var img_width = $('#crop_img').width();
var img_height = $('#crop_img').height();
$("#parent_container").width(img_width);
$("#parent_container").height(img_height);
$('#crop_img').one('load',function() {
add_window();
});
});
</script>
php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
if($upload !== NULL) {
/*=== gegevens ophalen en berekenen ===*/
$cover_width = '1200';
$cover_height = '375';
$vb_img_width = $_POST['img_width'];
$vb_img_height = $_POST['img_height'];
$vb_grop_width = $vb_img_width;
$vb_grop_height = $cover_height / $cover_width * $vb_grop_width;
$vb_grop_hoogte = $_POST['source_y'];
list($org_img_width, $org_img_height ) = getimagesize('hosting/movie/'.$movie['foto_token'].'/cover_full.jpg');
$org_grop_width = $org_img_width;
$org_grop_height = ($cover_height / $cover_width) * $org_grop_width;
$org_grop_hoogte = ($vb_grop_hoogte / $vb_img_height) * $org_img_height;
/*=== foto bijwerken ===*/
if($org_img_width !== $cover_width && $org_img_height !== $cover_height) { /*perfecte afmetingen*/
if($org_grop_hoogte >= 0 && $org_grop_height + $org_grop_hoogte <= $org_img_height && $org_grop_width == $org_img_width) { /*buiten beeld*/
$cover = imagecreatetruecolor($cover_width, $cover_height); /*aanmaken van cover*/
$cover_full = imagecreatetruecolor($org_grop_width, $org_grop_height); /*aanmaken van cover*/
$full = imagecreatefromjpeg('hosting/movie/'.$movie['foto_token'].'/cover_full.jpg'); /*volledige cover in variabel zwieren*/
imagecopy($cover_full , $full, 0, 0, 0, $org_grop_hoogte, $org_grop_width, $org_grop_height );
imagecopyresized($cover, $cover_full, 0, 0, 0, 0, $cover_width, $cover_height, $org_grop_width, $org_grop_height);
if(!imagejpeg($cover, 'hosting/movie/'.$movie['foto_token'].'/cover.jpg', 100)) {
$foutlijst_html = 'Er is een fout opgetreden bij het verkleinen van de poster.';
$upload = NULL;
} else {
logboek($film_id, 'update', 'Toevoegen van film, stap 5.', array('cover' => 'hosting/movie/'.$movie['foto_token'].'/cover.jpg'));
header('location: http://moviechecker.be/movie/'.$film_id.'/'.url_titel($movie['titel']));
}
} else {
$foutlijst_html = 'Het geselecteerde gebied is buiten het berijk van de cover.';
$upload = NULL;
}
} else {
$foutlijst_html = 'De afmetingen van de cover zijn al perfect.';
$upload = NULL;
}
}
?>
if($upload !== NULL) {
/*=== gegevens ophalen en berekenen ===*/
$cover_width = '1200';
$cover_height = '375';
$vb_img_width = $_POST['img_width'];
$vb_img_height = $_POST['img_height'];
$vb_grop_width = $vb_img_width;
$vb_grop_height = $cover_height / $cover_width * $vb_grop_width;
$vb_grop_hoogte = $_POST['source_y'];
list($org_img_width, $org_img_height ) = getimagesize('hosting/movie/'.$movie['foto_token'].'/cover_full.jpg');
$org_grop_width = $org_img_width;
$org_grop_height = ($cover_height / $cover_width) * $org_grop_width;
$org_grop_hoogte = ($vb_grop_hoogte / $vb_img_height) * $org_img_height;
/*=== foto bijwerken ===*/
if($org_img_width !== $cover_width && $org_img_height !== $cover_height) { /*perfecte afmetingen*/
if($org_grop_hoogte >= 0 && $org_grop_height + $org_grop_hoogte <= $org_img_height && $org_grop_width == $org_img_width) { /*buiten beeld*/
$cover = imagecreatetruecolor($cover_width, $cover_height); /*aanmaken van cover*/
$cover_full = imagecreatetruecolor($org_grop_width, $org_grop_height); /*aanmaken van cover*/
$full = imagecreatefromjpeg('hosting/movie/'.$movie['foto_token'].'/cover_full.jpg'); /*volledige cover in variabel zwieren*/
imagecopy($cover_full , $full, 0, 0, 0, $org_grop_hoogte, $org_grop_width, $org_grop_height );
imagecopyresized($cover, $cover_full, 0, 0, 0, 0, $cover_width, $cover_height, $org_grop_width, $org_grop_height);
if(!imagejpeg($cover, 'hosting/movie/'.$movie['foto_token'].'/cover.jpg', 100)) {
$foutlijst_html = 'Er is een fout opgetreden bij het verkleinen van de poster.';
$upload = NULL;
} else {
logboek($film_id, 'update', 'Toevoegen van film, stap 5.', array('cover' => 'hosting/movie/'.$movie['foto_token'].'/cover.jpg'));
header('location: http://moviechecker.be/movie/'.$film_id.'/'.url_titel($movie['titel']));
}
} else {
$foutlijst_html = 'Het geselecteerde gebied is buiten het berijk van de cover.';
$upload = NULL;
}
} else {
$foutlijst_html = 'De afmetingen van de cover zijn al perfect.';
$upload = NULL;
}
}
?>
Gewijzigd op 31/01/2015 19:47:00 door Php knipper
Nu is het de bedoeling dat wij gaan raden wat er mis gaat ?
Dat wij gaan raden wat reze code moet doen ?
Dat wij gaan raden waar het mis gaat ?
Dat wij gaan raden waarom het mis gaat ?
Ik hou niet zo erg van dit soort spelletjes geloof ik maar succes met de andere medespelers.
Dit is toch niet hetzelfde als de hoogte van het venster / de afbeelding zelf?
Of heeft de cover een vaste afmeting?
Wat ik zou doen:
- reduceer het aantal variabelen in je PHP-code en geef deze betere omschrijvingen
- stel een voorbeeld op waarvan je weet welke berekende waarden het zou moeten hebben
- dump deze waarden in je PHP-script
- teken wat situaties op papier
Ik denk dat dat het snelste is om dit ding te debuggen (en het dus wss ergens in het PHP-script misgaat).
Gewijzigd op 31/01/2015 20:54:04 door Thomas van den Heuvel
Code (php)
1
2
3
4
2
3
4
<?php
$cover_width = '1200';
$cover_height = '375';
?>
$cover_width = '1200';
$cover_height = '375';
?>
Ik dacht aan de komma getallen want het is afhakelijk van de grote van de foto in hoever het mis loopt.
Heb je al eens een plaatje getekend (pen en papier) om het effect van bovenstaande code na te bootsen?