Waarom wil dit niet croppen
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Image Cropping Javascript</h1>
<input type="file">
<script>
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', (e) => {
console.log(input.files)
const reader = new FileReader()
reader.onload = function() {
const img = new Image() // 'img' HTMLImageElement
img.onload = function(){
let cvs = document.createElement('canvas')
const ctx = cvs.getContext('2d')
ctx.drawImage(img, 0, 0)
orgWidth = img.width
orgHeigth = img.height
console.log("orgWidth: ", orgWidth)
console.log("orgHeigth: ", orgHeigth)
if (orgWidth > orgHeigth) {
sWidth = orgHeigth
sX = Math.floor((orgWidth - orgHeigth) / 2)
sY = 0
} else {
sWidth = orgWidth
sX = 0
sY = Math.floor((orgHeigth - orgWidth) / 2)
}
console.log("sWidth: ", sWidth)
console.log("sX: ", sX)
console.log("sY: ", sY)
cvs.width = sWidth
cvs.height = sWidth
// ctx.drawImage(img, 0, 0)
// drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, sX, sY, sWidth, sWidth, 0, 0, sWidth, sWidth)
document.body.appendChild(img)
}
img.src = reader.result
// now we have an image that we can append to the document
//document.body.appendChild(img)
}
reader.readAsDataURL(input.files[0])
}, false)
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Image Cropping Javascript</h1>
<input type="file">
<script>
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', (e) => {
console.log(input.files)
const reader = new FileReader()
reader.onload = function() {
const img = new Image() // 'img' HTMLImageElement
img.onload = function(){
let cvs = document.createElement('canvas')
const ctx = cvs.getContext('2d')
ctx.drawImage(img, 0, 0)
orgWidth = img.width
orgHeigth = img.height
console.log("orgWidth: ", orgWidth)
console.log("orgHeigth: ", orgHeigth)
if (orgWidth > orgHeigth) {
sWidth = orgHeigth
sX = Math.floor((orgWidth - orgHeigth) / 2)
sY = 0
} else {
sWidth = orgWidth
sX = 0
sY = Math.floor((orgHeigth - orgWidth) / 2)
}
console.log("sWidth: ", sWidth)
console.log("sX: ", sX)
console.log("sY: ", sY)
cvs.width = sWidth
cvs.height = sWidth
// ctx.drawImage(img, 0, 0)
// drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, sX, sY, sWidth, sWidth, 0, 0, sWidth, sWidth)
document.body.appendChild(img)
}
img.src = reader.result
// now we have an image that we can append to the document
//document.body.appendChild(img)
}
reader.readAsDataURL(input.files[0])
}, false)
</script>
</body>
</html>
Ik krijg steeds het originele plaatje terwijl ik een vierkant plaatje verwacht.
Meestal doe ik iets fout, onvoldoende of niet; maar deze keer zie ik het niet (meer).
Een beetje hulp kan ik dan ook goed gebruiken.
Dank op voorhand.
Dan zie ik echt iets over het hoofd want ik begrijp niet wat je bedoelt.
Wil ja dat toelichten?
Code (php)
1
document.body.appendChild(img)
op regel 45 van je script. Je koppelt dus de originele img aan je body element. Als je er dit van maakt:
Code (php)
1
document.body.appendChild(cvs)
dan koppel je het canvas element waar de gecropte versie op getekend is.
Bedankt Jan.
En ik maar denken dat ik op regel 44 de gewijzigde img in de body plaats.
Toevoeging op 02/09/2022 10:37:59:
@Jan Koehoorn,
Bedankt Jan.
En ik maar denken dat ik op regel 44 de gewijzigde img in de body plaats.
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
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
...
<style>
.canvas {
width: 150px;
height: 150px;
border: 1px solid black;
}
</style>
<body>
<h1>Image Editing Javascript</h1>
<input type="file">
<br>
<div class="canvas">
<canvas id="cvs"></canvas>
</div>
<script>
const cvs = document.getElementById('cvs')
const ctx = cvs.getContext('2d')
const img = new Image()
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', (e) => {
const [file] = input.files
img.src = URL.createObjectURL(file)
img.onload = function() {
if (img.height > img.width) {
sX = 0
sY = Math.floor((img.height - img.width) / 2)
sW = img.width
} else {
sX = Math.floor((img.width - img.height) / 2)
sY = 0
sW = img.height
}
ctx.drawImage(img, sX, sY, sW, sW, 0, 0, 150, 150)
URL.revokeObjectURL(img.src)
}
}, false)
</script>
</body>
</html>
<style>
.canvas {
width: 150px;
height: 150px;
border: 1px solid black;
}
</style>
<body>
<h1>Image Editing Javascript</h1>
<input type="file">
<br>
<div class="canvas">
<canvas id="cvs"></canvas>
</div>
<script>
const cvs = document.getElementById('cvs')
const ctx = cvs.getContext('2d')
const img = new Image()
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', (e) => {
const [file] = input.files
img.src = URL.createObjectURL(file)
img.onload = function() {
if (img.height > img.width) {
sX = 0
sY = Math.floor((img.height - img.width) / 2)
sW = img.width
} else {
sX = Math.floor((img.width - img.height) / 2)
sY = 0
sW = img.height
}
ctx.drawImage(img, sX, sY, sW, sW, 0, 0, 150, 150)
URL.revokeObjectURL(img.src)
}
}, false)
</script>
</body>
</html>
Mijn volgende stap is om het plaatje dat nu in het canvas zit naar de server te uploaden.
1. Ik moet de inhoud van het canvas omvormen naar een blob
2. Vervolgens het blob in een file plaatsen
3. de file uploaden naar de server.
Stukjes en beetjes vind ik op SO, maar ik mis het hele 'plaatje', het overzicht.
Wil iemand me in de goeie richting wijzen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function send() {
let cfoto = document.getElementById("ccanvas");
let canvasData = cfoto.toDataURL("image/png");
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
msg = xhttp.responseText;
if(msg != "") {
alert(msg);
}else{
location.reload(true);
}
}
};
xhttp.open("POST", "getpost.php", true);
xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp.send("v=" + canvasData);
sluit();
}
let cfoto = document.getElementById("ccanvas");
let canvasData = cfoto.toDataURL("image/png");
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
msg = xhttp.responseText;
if(msg != "") {
alert(msg);
}else{
location.reload(true);
}
}
};
xhttp.open("POST", "getpost.php", true);
xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp.send("v=" + canvasData);
sluit();
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if(isset($_POST['v'])) {
$data = $_POST['v'];
$data = str_replace(' ', '+', $data);
list($type, $data) = explode(';', $data);
list($base, $data) = explode(',', $data);
if($type=='data:image/png' && $base=='base64') {
$data = base64_decode($data);
$ip = $_SERVER['REMOTE_ADDR'] ?? '';
$ip = '_' . str_replace(':', '.', $ip);
file_put_contents('screendump_' . date('Ymd_his') . $ip . '.png', $data);
echo 'Bestand opgeslagen!';
}else{
echo 'Geen correcte info!';
}
}else{
echo '?';
}
$data = $_POST['v'];
$data = str_replace(' ', '+', $data);
list($type, $data) = explode(';', $data);
list($base, $data) = explode(',', $data);
if($type=='data:image/png' && $base=='base64') {
$data = base64_decode($data);
$ip = $_SERVER['REMOTE_ADDR'] ?? '';
$ip = '_' . str_replace(':', '.', $ip);
file_put_contents('screendump_' . date('Ymd_his') . $ip . '.png', $data);
echo 'Bestand opgeslagen!';
}else{
echo 'Geen correcte info!';
}
}else{
echo '?';
}
Dat opent weer een nieuw gezichtspunt. Eigenwijs als ik ben, zou ik een fetch gebruiken maar dat terzijde.
Inmiddels heb ik toegevoegd;:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
img.onload = function() {
...
cvs.toBlob( blob => {
const anchor = document.createElement('a')
anchor.download = 'cropped-image.png'
anchor.href = URL.createObjectURL(blob)
anchor.click()
URL.revokeObjectURL(anchor.href)
}, 'image/png', 0.9)
...
cvs.toBlob( blob => {
const anchor = document.createElement('a')
anchor.download = 'cropped-image.png'
anchor.href = URL.createObjectURL(blob)
anchor.click()
URL.revokeObjectURL(anchor.href)
}, 'image/png', 0.9)
Dit levert me een file met het gecropte en verkleinde plaatje in:
~/Downloads/cropped-image.png
Nu zoek ik naar een mogelijkheid om die file in:
<input type="file" id="upload" name="upload"
te krijgen zonder dat de bezoeker opnieuw op een knop moet drukken.
Is het in javascript mogelijk om een pointer te wijzigen die ongetwijfeld 'ergens' in de ' <input type="file"' instructie verborgen zit. Ik denk het eigenlijk niet omdat dit een veiligheidslek van mega orde zou zijn.
Maar... hoe dan wel?
Gewijzigd op 04/09/2022 08:16:45 door Jan R
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
canvas.toBlob(function(blob) {
let file = new File([blob], 'img.jpg',
{type: 'image/jpeg', lastModified: new Date().getTime() } ),
transfer = new DataTransfer();
transfer.items.add(file);
let input = document.getElementById('<id_van_je_input_file_element>');
input.files = transfer.files;
}, 'image/jpeg', 0.9);
let file = new File([blob], 'img.jpg',
{type: 'image/jpeg', lastModified: new Date().getTime() } ),
transfer = new DataTransfer();
transfer.items.add(file);
let input = document.getElementById('<id_van_je_input_file_element>');
input.files = transfer.files;
}, 'image/jpeg', 0.9);
Dank! Ik heb het nog niet uitgewerkt, maar het lijkt vreselijk veel op hetgeen ik bedoel.
Als ik het ga gebruiken zie ik het wel. Ik vraag me nog af of de oorspronkelijke file dan ook uit het <input type="file" ...> element is verdwenen/overschreven.
De HTML Drag and Drop API, heb ik heel niet aan gedacht; nogmaals dank.
Heel knap dat je dit hebt gevonden. In de documentatie kan ik geen method add() van het items object ontdekken. Maar, zoals vaak, ik kijk misschien niet goed.
Toevoeging op 04/09/2022 17:01:06:
Toevoeging op 04/09/2022 17:05:18:
Dit werkt! Helemaal geweldig.
Ook de oude inhoud van <input type="file" ...> is overschreven.
Heel clean, nogmaals dank!
Gewijzigd op 04/09/2022 12:05:40 door Jan Kila