hargata/lubelog
1
0
Fork 0
mirror of https://github.com/hargata/lubelog.git synced 2025-12-10 00:46:08 -06:00
Code Issues Packages Projects Releases 51 Wiki Activity

Merge pull request #653 from hargata/Hargata/616

Browse Source 
thumbnail resize using Hermite interpolation
This commit is contained in:
Hargata Softworks 2024-10-17 10:37:54 -06:00 committed by GitHub
commit 3631a036c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 118 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Views/Vehicle/_VehicleModal.cshtml
View File

@ -124,12 +124,12 @@
@if (!string.IsNullOrWhiteSpace(Model.ImageLocation))
{
<label for="inputImage">@translator.Translate(userLanguage, "Replace picture(optional)")</label>
<input onChange="uploadFileAsync(this)" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
<input onChange="uploadThumbnail(this)" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
}
else
{
<label for="inputImage">@translator.Translate(userLanguage, "Upload a picture(optional)")</label>
<input onChange="uploadFileAsync(this)" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
<input onChange="uploadThumbnail(this)" type="file" accept=".png,.jpg,.jpeg" class="form-control-file" id="inputImage">
}
</div>
</div>

115
wwwroot/js/shared.js
View File

@ -162,9 +162,124 @@ function toggleOdometerAdjustment() {
$("#odometerAdjustments").collapse('hide');
}
}
function uploadThumbnail(event) {
var originalImage = event.files[0];
var maxHeight = 290;
try {
//load image and perform Hermite resize
var img = new Image();
img.onload = function () {
URL.revokeObjectURL(img.src);
var imgWidth = img.width;
var imgHeight = img.height;
if (imgHeight > maxHeight) {
//only scale if height is greater than threshold
var imgScale = maxHeight / imgHeight;
var newImgWidth = imgWidth * imgScale;
var newImgHeight = imgHeight * imgScale;
var resizedCanvas = hermiteResize(img, newImgWidth, newImgHeight);
resizedCanvas.toBlob((blob) => {
let file = new File([blob], originalImage.name, { type: "image/jpeg" });
uploadFileAsync(file);
}, 'image/jpeg');
} else {
uploadFileAsync(originalImage);
}
}
img.src = URL.createObjectURL(originalImage);
} catch (error) {
console.log(`Error while attempting to upload and resize thumbnail - ${error}`);
uploadFileAsync(originalImage);
}
}
//Resize method using Hermite interpolation
//JS implementation by viliusle
function hermiteResize(origImg, width, height) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = origImg.width;
canvas.height = origImg.height;
ctx.drawImage(origImg, 0, 0);
var width_source = canvas.width;
var height_source = canvas.height;
width = Math.round(width);
height = Math.round(height);
var ratio_w = width_source / width;
var ratio_h = height_source / height;
var ratio_w_half = Math.ceil(ratio_w / 2);
var ratio_h_half = Math.ceil(ratio_h / 2);
var img = ctx.getImageData(0, 0, width_source, height_source);
var img2 = ctx.createImageData(width, height);
var data = img.data;
var data2 = img2.data;
for (var j = 0; j < height; j++) {
for (var i = 0; i < width; i++) {
var x2 = (i + j * width) * 4;
var weight = 0;
var weights = 0;
var weights_alpha = 0;
var gx_r = 0;
var gx_g = 0;
var gx_b = 0;
var gx_a = 0;
var center_y = (j + 0.5) * ratio_h;
var yy_start = Math.floor(j * ratio_h);
var yy_stop = Math.ceil((j + 1) * ratio_h);
for (var yy = yy_start; yy < yy_stop; yy++) {
var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
var center_x = (i + 0.5) * ratio_w;
var w0 = dy * dy; //pre-calc part of w
var xx_start = Math.floor(i * ratio_w);
var xx_stop = Math.ceil((i + 1) * ratio_w);
for (var xx = xx_start; xx < xx_stop; xx++) {
var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
var w = Math.sqrt(w0 + dx * dx);
if (w >= 1) {
//pixel too far
continue;
}
//hermite filter
weight = 2 * w * w * w - 3 * w * w + 1;
var pos_x = 4 * (xx + yy * width_source);
//alpha
gx_a += weight * data[pos_x + 3];
weights_alpha += weight;
//colors
if (data[pos_x + 3] < 255)
weight = weight * data[pos_x + 3] / 250;
gx_r += weight * data[pos_x];
gx_g += weight * data[pos_x + 1];
gx_b += weight * data[pos_x + 2];
weights += weight;
}
}
data2[x2] = gx_r / weights;
data2[x2 + 1] = gx_g / weights;
data2[x2 + 2] = gx_b / weights;
data2[x2 + 3] = gx_a / weights_alpha;
}
}
//clear and resize canvas
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, width, height);
//draw
ctx.putImageData(img2, 0, 0);
return canvas;
}
function uploadFileAsync(event) {
let formData = new FormData();
if (event.files != undefined && event.files.length > 0) {
formData.append("file", event.files[0]);
} else {
formData.append("file", event);
}
sloader.show();
$.ajax({
url: "/Files/HandleFileUpload",