//index.html
<!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>
<form>
<button id="addNewImage" type="button">Yeni Resim Ekle</button>
<img id="preview" width="100">
</form>
<script src="index.js"></script>
</body>
</html>
// index.js
var btnAddNewImage = document.getElementById('addNewImage');var imgPreview = document.getElementById('preview');
var inputInvoicePhoto = document.getElementById('invoicePhoto');
var MaxSize = 1024;
function dataURLToBlob(dataURL) {
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = parts[1];
return new Blob([raw], {type: contentType});
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
// func delegateAfterResizedImage(imageName, blob)
function resizeImage(file, delegateAfterResizedImage){
if(file.type=="image/jpeg"){
var reader = new FileReader();
reader.onload = function(readerEvent){
var image = new Image();
image.onload = function(imageEvent){
var canvas = document.createElement('canvas'),
width = image.width,
height = image.height;
if (width > height) {
if (width > MaxSize) {
height *= MaxSize / width;
width = MaxSize;
}
} else {
if (height > MaxSize) {
width *= MaxSize / height;
height = MaxSize;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
console.log('dataUrl '+ dataUrl );
var resizedImage = dataURLToBlob(dataUrl);
delegateAfterResizedImage(resizedImage, file.name)
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
}
btnAddNewImage.addEventListener('click', function () {
console.log('clicked');
var inputSelectFile = document.createElement('input');
inputSelectFile.type = "file";
inputSelectFile.accept = "image/jpeg";
inputSelectFile.addEventListener('change', function(e){
var files = e.target.files;
if(files!=null && files.length > 0){
for(var i = 0; i < files.length; i++){
var file = files[i];
resizeImage(file, (blob, name)=>{
console.log(name);
var objectURL = URL.createObjectURL(blob);
imgPreview.src = objectURL;
});
}
}
inputSelectFile = null;
})
inputSelectFile.click();
}, false);
