-
Notifications
You must be signed in to change notification settings - Fork 0
/
imge_compres.js
127 lines (99 loc) · 3.27 KB
/
imge_compres.js
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const MAX_WIDTH = 400;
const MAX_HEIGHT = 400;
const MIME_TYPE = "image/png";
const QUALITY = 0.2;
// const input = document.getElementById("img-input");
// input.onchange = function (ev) {
function readURL(ev,id) {
console.log(ev);
const file = ev.files[0]; // get the file
const blobURL = URL.createObjectURL(file);
const img = new Image();
img.src = blobURL;
img.onerror = function () {
URL.revokeObjectURL(this.src);
// Handle the failure properly
console.log("Cannot load image");
};
img.onload = function () {
URL.revokeObjectURL(this.src);
const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
const canvas = document.createElement("canvas");
canvas.id = "canv"+id;
canvas.width = newWidth;
canvas.height = newHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, newWidth, newHeight);
$('#root2'+id).html("");
$('#PHOTOS'+id).val("")
canvas.toBlob(
(blob) => {
displayInfo('Fichier Compressé', blob,id);
// Handle the compressed image. es. upload or save in local state
displayInfo('Original file', file,id);
// displayInfo('Compressed file', blob);
},
MIME_TYPE,
QUALITY
);
//$('#root2').html(displayInfo('Compressed file', blob));
//document.getElementById("root2").html("");
document.getElementById("root2"+id).append(canvas);
var canv = document.getElementById('canv'+id);
var image = new Image();
image.id = "imageGet"
image.src = canv.toDataURL("image/png");
var type = 'image/png';
var imgName = generate_code_photo(7)+".png";
//alert(canv.toDataURL("image/png"))
const dataURL = canv.toDataURL("image/png");
//document.getElementById('PHOTOS').value(dataURL)
$('#PHOTOS'+id).val(dataURL)
//download(canv.toDataURL("image/png"), imgName);
};
}
function download(dataurl, filename) {
const link = document.createElement("a");
link.href = dataurl;
link.download = filename;
link.click();
}
function generate_code_photo(taille=0){
var Caracteres = '0123456789';
var QuantidadeCaracteres = Caracteres.length;
QuantidadeCaracteres--;
var Hash= '';
for(var x =1; x <= taille; x++){
var Posicao = Math.floor(Math.random() * QuantidadeCaracteres);
Hash += Caracteres.substr(Posicao, 1);
}
return "25"+Hash;
}
function calculateSize(img, maxWidth, maxHeight) {
let width = img.width;
let height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width);
width = maxWidth;
}
} else {
if (height > maxHeight) {
width = Math.round((width * maxHeight) / height);
height = maxHeight;
}
}
return [width, height];
}
// Utility functions for demo purpose
function displayInfo(label, file,id) {
const p = document.createElement('p');
p.innerText = `${label} - ${readableBytes(file.size)}`;
document.getElementById('root2'+id).append(p);
}
function readableBytes(bytes) {
const i = Math.floor(Math.log(bytes) / Math.log(1024)),
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
}