Я не могу сжать свое изображение с помощью JIC. Мне нужно POST изображение в сжатом формате JPEG, чтобы загрузка сервера была меньше. На самом деле мне нужно, чтобы размер изображения был как минимум сжат на 30%.
Я включил jic.min.js, но не могу его реализовать. Я пытался реализовать функцию сжатия, но к моей ошибке это приводило к ошибке. Пожалуйста, помогите, спасибо заранее.
</head>
<body>
<div class="container p-2">
<div class="card text-center">
<div class="card-header bg-primary text-white">
mediCam
</div>
<div class="card-body">
<!-- <iframe src="https://mediag-data.s3.amazonaws.com/uploads/temp-img/WIN_20190830_00_52_59_Pro.jpg" ></iframe> -->
<p class="card-text">Please select images using the below button. You may also choose camera in mobile.</p>
<img id="myimg" height="300" width="350">
<input type="file" id="files" name="files" />
<!-- <br>
<div class="btn btn-primary btn-rounded" onclick="convertToBase64()">Upload
</div> -->
</div>
<div class="card-footer">
<!-- <label>base64:</label><br>
<textarea id="base64"></textarea><br>
<label>binary:</label><br>
<textarea id="binary"></textarea> -->
<label>Output:</label>
<label id="output"></label>
<div id="ispinner">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- <table border="1">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
</table> -->
</div>
</div>
</div>
<script>
// Check for the File API support.
//added jic.min.js
var jic={compress:function(t,e,n){var a="image/jpeg";"undefined"!=typeof n&&"png"==n&&(a="image/png");var r=document.createElement("canvas");r.width=t.naturalWidth,r.height=t.naturalHeight;var o=(r.getContext("2d").drawImage(t,0,0),r.toDataURL(a,e/100)),s=new Image;return s.src=o,s},upload:function(t,e,n,a,r,o,s,i){void 0===XMLHttpRequest.prototype.sendAsBinary&&(XMLHttpRequest.prototype.sendAsBinary=function(t){var e=Array.prototype.map.call(t,function(t){return 255&t.charCodeAt(0)});this.send(new Uint8Array(e).buffer)});var p="image/jpeg";".png"==a.substr(-4)&&(p="image/png");var u=t.src;u=u.replace("data:"+p+";base64,","");var d=new XMLHttpRequest;d.open("POST",e,!0);var c="someboundary";if(d.setRequestHeader("Content-Type","multipart/form-data; boundary="+c),i&&"object"==typeof i)for(var f in i)d.setRequestHeader(f,i[f]);s&&s instanceof Function&&(d.upload.onprogress=function(t){t.lengthComputable&&s(t.loaded/t.total*100)}),d.sendAsBinary(["--"+c,'Content-Disposition: form-data; name="'+n+'"; filename="'+a+'"',"Content-Type: "+p,"",atob(u),"--"+c+"--"].join("\r\n")),d.onreadystatechange=function(){4==this.readyState&&(200==this.status?r(this.responseText):this.status>=400&&o&&o instanceof Function&&o(this.responseText))}}};
//end
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('ispinner').style.display = "none"
document.getElementById('myimg').style.display = "none"
document.getElementById('files').addEventListener('change', handleFileSelect, false);
} else {
alert('The File APIs are not fully supported in this browser.');
}
// Found a base64 encoding to binary function online that goes something like this:
function handleFileSelect(evt) {
document.getElementById('ispinner').style.display = "block"
document.getElementById('myimg').style.display = "none"
console.log("handleFileSelect")
//document.getElementById('base64').value = ""
var f = evt.target.files[0]; // FileList object
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var binaryData = e.target.result;
const dt = new Date().getTime().toString();
const medurl = "apiaddress"+dt+".jpeg"
//ajax call -start
var saveData = $.ajax({
type: 'POST',
url: medurl,
data: f,
contentType:false,
processData:false,
success: function(resultData) {
alert("Save Complete");
console.log(resultData)
var getData = $.ajax({
type: 'GET',
url: medurl,
contentType:false,
processData:false,
success: function(result1) { //alert("Save Complete")
console.log(JSON.stringify(result1))
var resArr = result1.text.split('\n')
var op = ''
for(i=0;i<resArr.length;i++){
var tmpArr = resArr[i].split(',')
op = op + '<tr>'
for(j=0;j<tmpArr.length;j++){
op = op + ((i===0)?'<th>':'<td>') + tmpArr[j] + ((i===0)?'</th>':'</td>');
}
op = op + '</tr>'
}
console.log('op: '+ op)
document.getElementById("output").innerHTML = '<table border=1>' + op + '</table>'
console.log(result1.text)
},
error: function(err){
console.log(err)
}
});
},
error: function(err){
console.log(err)
}
});
//ajax call -end
console.log('Binary:');
console.log(binaryData)
//Converting Binary Data to base 64
var base64String = window.btoa(binaryData);
console.log('base64:')
console.log(base64String)
document.getElementById('ispinner').style.display = "none"
document.getElementById('myimg').setAttribute("src", "data:image/png;base64, "+base64String)
document.getElementById('myimg').style.display = "block"
};
})(f);
// Read in the image file as a data URL.
// console.log('reader: ', JSON.stringify(reader))
reader.readAsBinaryString(f);
// console.log('binary:')
// console.log(binString)
}
</script>
</body>