mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2024-11-18 21:30:10 +01:00
adjust contrast!
This commit is contained in:
parent
a3c7f5aa46
commit
5877b40be5
@ -143,6 +143,8 @@ home.add-page-numbers.desc=Add Page numbers throughout a document in a set locat
|
|||||||
home.auto-rename.title=Auto Rename PDF File
|
home.auto-rename.title=Auto Rename PDF File
|
||||||
home.auto-rename.desc=Auto renames a PDF file based on its detected header
|
home.auto-rename.desc=Auto renames a PDF file based on its detected header
|
||||||
|
|
||||||
|
home.adjust-contrast.title=Adjust Colors/Contrast
|
||||||
|
home.adjust-contrast.desc=Adjust Contrast, Saturation and Brightness of a PDF
|
||||||
|
|
||||||
error.pdfPassword=The PDF Document is passworded and either the password was not provided or was incorrect
|
error.pdfPassword=The PDF Document is passworded and either the password was not provided or was incorrect
|
||||||
|
|
||||||
|
@ -1,7 +1,10 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
<html th:lang="${#locale.toString()}"
|
||||||
|
th:lang-direction="#{language.direction}"
|
||||||
|
xmlns:th="http://www.thymeleaf.org">
|
||||||
|
|
||||||
<th:block th:insert="~{fragments/common :: head(title=#{extractImages.title})}"></th:block>
|
<th:block
|
||||||
|
th:insert="~{fragments/common :: head(title=#{extractImages.title})}"></th:block>
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -16,14 +19,23 @@
|
|||||||
<input type="file" id="pdf-file" accept="application/pdf" />
|
<input type="file" id="pdf-file" accept="application/pdf" />
|
||||||
<canvas id="pdf-canvas"></canvas>
|
<canvas id="pdf-canvas"></canvas>
|
||||||
|
|
||||||
<h4>Contrast: <span id="contrast-val">100</span>%</h4>
|
<h4>
|
||||||
<input type="range" min="0" max="200" value="100" id="contrast-slider" />
|
Contrast: <span id="contrast-val">100</span>%
|
||||||
|
</h4>
|
||||||
|
<input type="range" min="0" max="200" value="100"
|
||||||
|
id="contrast-slider" />
|
||||||
|
|
||||||
<h4>Brightness: <span id="brightness-val">100</span>%</h4>
|
<h4>
|
||||||
<input type="range" min="0" max="200" value="100" id="brightness-slider" />
|
Brightness: <span id="brightness-val">100</span>%
|
||||||
|
</h4>
|
||||||
|
<input type="range" min="0" max="200" value="100"
|
||||||
|
id="brightness-slider" />
|
||||||
|
|
||||||
<h4>Saturation: <span id="saturation-val">100</span>%</h4>
|
<h4>
|
||||||
<input type="range" min="0" max="200" value="100" id="saturation-slider" />
|
Saturation: <span id="saturation-val">100</span>%
|
||||||
|
</h4>
|
||||||
|
<input type="range" min="0" max="200" value="100"
|
||||||
|
id="saturation-slider" />
|
||||||
|
|
||||||
<button id="download-button">Download</button>
|
<button id="download-button">Download</button>
|
||||||
|
|
||||||
@ -32,13 +44,32 @@
|
|||||||
var canvas = document.getElementById('pdf-canvas');
|
var canvas = document.getElementById('pdf-canvas');
|
||||||
var context = canvas.getContext('2d');
|
var context = canvas.getContext('2d');
|
||||||
var originalImageData = null;
|
var originalImageData = null;
|
||||||
|
var allPages = [];
|
||||||
|
var pdfDoc = null;
|
||||||
|
var pdf = null; // This is the current PDF document
|
||||||
|
|
||||||
function renderPDFAndSaveOriginalImageData(file) {
|
async function renderPDFAndSaveOriginalImageData(file) {
|
||||||
var fileReader = new FileReader();
|
var fileReader = new FileReader();
|
||||||
fileReader.onload = function() {
|
fileReader.onload = async function() {
|
||||||
var data = new Uint8Array(this.result);
|
var data = new Uint8Array(this.result);
|
||||||
pdfjsLib.getDocument({data: data}).promise.then(function(pdf) {
|
pdf = await pdfjsLib.getDocument({data: data}).promise;
|
||||||
pdf.getPage(1).then(function(page) {
|
|
||||||
|
// Get the number of pages in the PDF
|
||||||
|
var numPages = pdf.numPages;
|
||||||
|
allPages = Array.from({length: numPages}, (_, i) => i + 1);
|
||||||
|
|
||||||
|
// Create a new PDF document
|
||||||
|
pdfDoc = await PDFLib.PDFDocument.create();
|
||||||
|
// Render the first page in the viewer
|
||||||
|
await renderPageAndAdjustImageProperties(1);
|
||||||
|
};
|
||||||
|
fileReader.readAsArrayBuffer(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
// This function is now async and returns a promise
|
||||||
|
function renderPageAndAdjustImageProperties(pageNum) {
|
||||||
|
return new Promise(async function(resolve, reject) {
|
||||||
|
var page = await pdf.getPage(pageNum);
|
||||||
var scale = 1.5;
|
var scale = 1.5;
|
||||||
var viewport = page.getViewport({ scale: scale });
|
var viewport = page.getViewport({ scale: scale });
|
||||||
|
|
||||||
@ -53,13 +84,13 @@
|
|||||||
var renderTask = page.render(renderContext);
|
var renderTask = page.render(renderContext);
|
||||||
renderTask.promise.then(function () {
|
renderTask.promise.then(function () {
|
||||||
originalImageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
originalImageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
|
adjustImageProperties();
|
||||||
|
resolve();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
};
|
|
||||||
fileReader.readAsArrayBuffer(file);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function adjustImageProperties() {
|
function adjustImageProperties() {
|
||||||
var contrast = parseFloat(document.getElementById('contrast-slider').value);
|
var contrast = parseFloat(document.getElementById('contrast-slider').value);
|
||||||
var brightness = parseFloat(document.getElementById('brightness-slider').value);
|
var brightness = parseFloat(document.getElementById('brightness-slider').value);
|
||||||
@ -87,16 +118,7 @@
|
|||||||
g = adjustBrightnessForPixel(g, brightness);
|
g = adjustBrightnessForPixel(g, brightness);
|
||||||
b = adjustBrightnessForPixel(b, brightness);
|
b = adjustBrightnessForPixel(b, brightness);
|
||||||
// Adjust saturation
|
// Adjust saturation
|
||||||
if(i==100){
|
|
||||||
console.log('r',r)
|
|
||||||
console.log('g',g)
|
|
||||||
console.log('b',b)
|
|
||||||
console.log('saturation',saturation)
|
|
||||||
}
|
|
||||||
var rgb = adjustSaturationForPixel(r, g, b, saturation);
|
var rgb = adjustSaturationForPixel(r, g, b, saturation);
|
||||||
if(i==100){
|
|
||||||
console.log('rgb',rgb)
|
|
||||||
}
|
|
||||||
newImageData.data[i] = rgb[0];
|
newImageData.data[i] = rgb[0];
|
||||||
newImageData.data[i+1] = rgb[1];
|
newImageData.data[i+1] = rgb[1];
|
||||||
newImageData.data[i+2] = rgb[2];
|
newImageData.data[i+2] = rgb[2];
|
||||||
@ -187,13 +209,51 @@
|
|||||||
return Math.max(0, Math.min(255, pixel * brightness));
|
return Math.max(0, Math.min(255, pixel * brightness));
|
||||||
}
|
}
|
||||||
|
|
||||||
function downloadImage() {
|
async function downloadPDF() {
|
||||||
var downloadLink = document.createElement('a');
|
for (var i = 0; i < allPages.length; i++) {
|
||||||
downloadLink.href = canvas.toDataURL('image/png');
|
await renderPageAndAdjustImageProperties(allPages[i]);
|
||||||
downloadLink.download = 'download.png';
|
const pngImageBytes = canvas.toDataURL('image/png');
|
||||||
downloadLink.click();
|
const pngImage = await pdfDoc.embedPng(pngImageBytes);
|
||||||
|
const pngDims = pngImage.scale(1);
|
||||||
|
|
||||||
|
// Create a blank page matching the dimensions of the image
|
||||||
|
const page = pdfDoc.addPage([pngDims.width, pngDims.height]);
|
||||||
|
|
||||||
|
// Draw the PNG image
|
||||||
|
page.drawImage(pngImage, {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: pngDims.width,
|
||||||
|
height: pngDims.height
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Serialize the PDFDocument to bytes (a Uint8Array)
|
||||||
|
const pdfBytes = await pdfDoc.save();
|
||||||
|
|
||||||
|
// Create a Blob
|
||||||
|
const blob = new Blob([pdfBytes.buffer], {type: "application/pdf"});
|
||||||
|
|
||||||
|
// Create download link
|
||||||
|
const downloadLink = document.createElement('a');
|
||||||
|
downloadLink.href = URL.createObjectURL(blob);
|
||||||
|
downloadLink.download = "download.pdf";
|
||||||
|
downloadLink.click();
|
||||||
|
|
||||||
|
// After download, reset the viewer and clear stored data
|
||||||
|
allPages = []; // Clear the pages
|
||||||
|
originalImageData = null; // Clear the image data
|
||||||
|
|
||||||
|
// Go back to page 1 and render it in the viewer
|
||||||
|
if (pdf !== null) {
|
||||||
|
renderPageAndAdjustImageProperties(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Event listeners
|
// Event listeners
|
||||||
document.getElementById('pdf-file').addEventListener('change', function(e) {
|
document.getElementById('pdf-file').addEventListener('change', function(e) {
|
||||||
if (e.target.files.length > 0) {
|
if (e.target.files.length > 0) {
|
||||||
@ -217,7 +277,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('download-button').addEventListener('click', function() {
|
document.getElementById('download-button').addEventListener('click', function() {
|
||||||
downloadImage();
|
downloadPDF();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user