Lay your images down on a contact sheet and pull out a PDF — or split a PDF back into individual prints. Everything happens here; nothing is saved in our server.
Drop images here to build a sheet, or click to browse
JPEG · PNG · WEBP · GIF · BMP · SVG — combined into one PDF, in the order shown below
Sheet settings
Compressionf/5.6 · 75% · Balanced
Building sheet…
Drop a PDF here to pull its pages out, or click to browse
Pages become individual PNG, JPEG or WEBP frames
' +
'
' + escapeHtml(f.name) + '
' + dims + '
' +
'
' +
'' +
'' +
'' +
'
' +
'
'
);
}).join('');
}
function moveFrame(id, dir){
var i = frames.findIndex(function(f){ return f.id === id; });
if (i < 0) return;
var j = i + dir;
if (j < 0 || j >= frames.length) return;
var tmp = frames[i]; frames[i] = frames[j]; frames[j] = tmp;
renderFrameGrid();
scheduleRebuildPdf(0);
}
function removeFrame(id){
var f = frames.find(function(x){ return x.id === id; });
if (f && f.objectURL) URL.revokeObjectURL(f.objectURL);
frames = frames.filter(function(x){ return x.id !== id; });
renderFrameGrid();
if (frames.length === 0){
document.getElementById('img2pdfBody').style.display = 'none';
document.getElementById('downloadPdfBtn').disabled = true;
if (img2pdf.pdfURL){ URL.revokeObjectURL(img2pdf.pdfURL); img2pdf.pdfURL = null; }
document.getElementById('buildStatus').textContent = 'No images yet';
return;
}
scheduleRebuildPdf(0);
}
function scheduleRebuildPdf(delay){
clearTimeout(img2pdf.debounceTimer);
document.getElementById('buildStatus').textContent = 'Building sheet…';
img2pdf.debounceTimer = setTimeout(buildPdf, delay);
}
function getPageDims(frame){
var s = img2pdf.settings;
if (s.pageSize === 'fit'){
return { w: frame.naturalWidth, h: frame.naturalHeight, unit: 'px', margin: 0 };
}
var base = PAGE_SIZES[s.pageSize];
var orient = s.orientation;
if (orient === 'auto') orient = (frame.naturalWidth > frame.naturalHeight) ? 'landscape' : 'portrait';
var w, h;
if (orient === 'landscape'){ w = Math.max(base.w, base.h); h = Math.min(base.w, base.h); }
else { w = Math.min(base.w, base.h); h = Math.max(base.w, base.h); }
return { w: w, h: h, unit: 'pt', margin: parseInt(s.margin, 10) || 0 };
}
function rasterizeForPdf(frame){
var canvas = document.createElement('canvas');
canvas.width = frame.naturalWidth; canvas.height = frame.naturalHeight;
var ctx = canvas.getContext('2d');
var fmt = img2pdf.settings.embed;
if (fmt === 'jpeg'){ ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, canvas.width, canvas.height); }
ctx.drawImage(frame.img, 0, 0);
if (fmt === 'jpeg'){
var q = QUALITY_STOPS[img2pdf.settings.qIndex].q / 100;
return canvas.toDataURL('image/jpeg', q);
}
return canvas.toDataURL('image/png');
}
function buildPdf(){
var statusEl = document.getElementById('buildStatus');
var dlBtn = document.getElementById('downloadPdfBtn');
if (frames.length === 0 || frames.some(function(f){ return !f.img; })){
if (frames.length === 0) statusEl.textContent = 'No images yet';
return;
}
if (typeof window.jspdf === 'undefined'){
statusEl.textContent = 'PDF library failed to load — check your connection.';
return;
}
try{
var doc = null;
var fmt = img2pdf.settings.embed;
frames.forEach(function(frame, idx){
var dims = getPageDims(frame);
var dataURL = rasterizeForPdf(frame);
var availW = dims.w - dims.margin * 2;
var availH = dims.h - dims.margin * 2;
var scale = Math.min(availW / frame.naturalWidth, availH / frame.naturalHeight);
var drawW = frame.naturalWidth * scale;
var drawH = frame.naturalHeight * scale;
var x = (dims.w - drawW) / 2;
var y = (dims.h - drawH) / 2;
var orientArg = dims.w > dims.h ? 'l' : 'p';
if (idx === 0){
doc = new window.jspdf.jsPDF({ orientation: orientArg, unit: dims.unit, format: [dims.w, dims.h] });
} else {
doc.addPage([dims.w, dims.h], orientArg);
}
doc.addImage(dataURL, fmt === 'jpeg' ? 'JPEG' : 'PNG', x, y, drawW, drawH);
});
var blob = doc.output('blob');
if (img2pdf.pdfURL) URL.revokeObjectURL(img2pdf.pdfURL);
img2pdf.pdfURL = URL.createObjectURL(blob);
statusEl.innerHTML = '' + frames.length + (frames.length === 1 ? ' page' : ' pages') + ' · ' + formatBytes(blob.size);
dlBtn.disabled = false;
} catch(e){
statusEl.textContent = 'Could not build the PDF: ' + e.message;
}
}
function wireImg2Pdf(){
var dz = document.getElementById('dzImages');
var input = document.getElementById('imgInput');
dz.addEventListener('click', function(){ input.click(); });
dz.addEventListener('keydown', function(e){ if (e.key === 'Enter' || e.key === ' '){ e.preventDefault(); input.click(); } });
input.addEventListener('change', function(){
Array.from(input.files).filter(function(f){ return f.type.indexOf('image/') === 0; }).forEach(addImageFrame);
input.value = '';
});
['dragenter','dragover'].forEach(function(evt){ dz.addEventListener(evt, function(e){ e.preventDefault(); dz.classList.add('active'); }); });
['dragleave','drop'].forEach(function(evt){ dz.addEventListener(evt, function(e){ e.preventDefault(); dz.classList.remove('active'); }); });
dz.addEventListener('drop', function(e){
if (e.dataTransfer && e.dataTransfer.files){
Array.from(e.dataTransfer.files).filter(function(f){ return f.type.indexOf('image/') === 0; }).forEach(addImageFrame);
}
});
document.getElementById('frameGrid').addEventListener('click', function(e){
var btn = e.target.closest('button[data-action]');
if (!btn) return;
var frameEl = e.target.closest('.frame');
var id = frameEl.dataset.id;
var action = btn.dataset.action;
if (action === 'left') moveFrame(id, -1);
else if (action === 'right') moveFrame(id, 1);
else if (action === 'remove') removeFrame(id);
});
document.getElementById('pageSize').addEventListener('change', function(e){
img2pdf.settings.pageSize = e.target.value;
var isFit = img2pdf.settings.pageSize === 'fit';
document.getElementById('orientationField').style.opacity = isFit ? 0.4 : 1;
document.getElementById('orientation').disabled = isFit;
document.getElementById('marginField').style.opacity = isFit ? 0.4 : 1;
document.getElementById('margin').disabled = isFit;
scheduleRebuildPdf(0);
});
document.getElementById('orientation').addEventListener('change', function(e){
img2pdf.settings.orientation = e.target.value;
scheduleRebuildPdf(0);
});
document.getElementById('margin').addEventListener('change', function(e){
img2pdf.settings.margin = e.target.value;
scheduleRebuildPdf(0);
});
var embedStops = document.getElementById('embedStops');
embedStops.innerHTML = QUALITY_STOPS.map(function(s, i){ return '' + s.label + ''; }).join('');
function updateEmbedQLabel(){
var s = QUALITY_STOPS[img2pdf.settings.qIndex];
document.getElementById('embedQLabel').textContent = s.label + ' · ' + s.q + '% · ' + s.desc;
embedStops.querySelectorAll('span').forEach(function(sp){ sp.classList.toggle('active', parseInt(sp.dataset.i, 10) === img2pdf.settings.qIndex); });
}
updateEmbedQLabel();
document.getElementById('embedQuality').addEventListener('input', function(e){
img2pdf.settings.qIndex = parseInt(e.target.value, 10);
updateEmbedQLabel();
scheduleRebuildPdf(300);
});
document.querySelectorAll('#embedChips .chip').forEach(function(chip){
chip.addEventListener('click', function(){
document.querySelectorAll('#embedChips .chip').forEach(function(c){ c.classList.remove('active'); });
chip.classList.add('active');
img2pdf.settings.embed = chip.dataset.embed;
var qBlock = document.getElementById('embedQualityBlock');
qBlock.style.opacity = img2pdf.settings.embed === 'png' ? 0.4 : 1;
document.getElementById('embedQuality').disabled = img2pdf.settings.embed === 'png';
scheduleRebuildPdf(0);
});
});
document.getElementById('downloadPdfBtn').addEventListener('click', function(){
if (!img2pdf.pdfURL) return;
triggerDownload(img2pdf.pdfURL, 'contact-sheet.pdf');
});
}
// ===================================================================
// MODE 2: PDF -> IMAGES
// ===================================================================
var pdfCards = new Map();
function parsePageRange(text, maxPages){
text = (text || '').trim();
if (!text) {
var all = [];
for (var i = 1; i <= maxPages; i++) all.push(i);
return all;
}
var set = {};
text.split(',').forEach(function(tok){
tok = tok.trim();
if (!tok) return;
if (tok.indexOf('-') > -1){
var parts = tok.split('-');
var a = parseInt(parts[0], 10), b = parseInt(parts[1], 10);
if (isNaN(a) || isNaN(b)) return;
if (a > b){ var t = a; a = b; b = t; }
for (var n = Math.max(1, a); n <= Math.min(maxPages, b); n++) set[n] = true;
} else {
var v = parseInt(tok, 10);
if (!isNaN(v) && v >= 1 && v <= maxPages) set[v] = true;
}
});
return Object.keys(set).map(Number).sort(function(a, b){ return a - b; });
}
function renderPdfPageToBlob(pdfDoc, pageNum, scale, format, quality){
return pdfDoc.getPage(pageNum).then(function(page){
var viewport = page.getViewport({ scale: scale });
var canvas = document.createElement('canvas');
canvas.width = Math.ceil(viewport.width);
canvas.height = Math.ceil(viewport.height);
var ctx = canvas.getContext('2d');
if (format === 'jpeg'){ ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, canvas.width, canvas.height); }
return page.render({ canvasContext: ctx, viewport: viewport }).promise.then(function(){
return new Promise(function(resolve, reject){
var mime = MIME[format];
var q = format === 'png' ? undefined : (quality / 100);
canvas.toBlob(function(blob){ if (blob) resolve(blob); else reject(new Error('encode failed')); }, mime, q);
});
});
});
}
function addPdfFile(file){
var id = uid();
var card = {
id: id, file: file, name: file.name, base: baseName(file.name), size: file.size,
pdfDoc: null, numPages: 0,
settings: { format: 'jpeg', qIndex: 2, resIndex: 1, range: '' },
pageBlobs: {}, el: null, errored: false, extracting: false,
previewTimer: null
};
pdfCards.set(id, card);
var el = document.createElement('div');
el.className = 'pdf-card';
el.dataset.id = id;
el.innerHTML =
'' +
'
Contains information related to marketing campaigns of the user. These are shared with Google AdWords / Google Ads when the Google Ads and Google Analytics accounts are linked together.
90 days
__utma
ID used to identify users and sessions
2 years after last activity
__utmt
Used to monitor number of Google Analytics server requests
10 minutes
__utmb
Used to distinguish new sessions and visits. This cookie is set when the GA.js javascript library is loaded and there is no existing __utmb cookie. The cookie is updated every time data is sent to the Google Analytics server.
30 minutes after last activity
__utmc
Used only with old Urchin versions of Google Analytics and not with GA.js. Was used to distinguish between new sessions and visits at the end of a session.
End of session (browser)
__utmz
Contains information about the traffic source or campaign that directed user to the website. The cookie is set when the GA.js javascript is loaded and updated when data is sent to the Google Anaytics server
6 months after last activity
__utmv
Contains custom information set by the web developer via the _setCustomVar method in Google Analytics. This cookie is updated every time new data is sent to the Google Analytics server.
2 years after last activity
__utmx
Used to determine whether a user is included in an A / B or Multivariate test.
18 months
_ga
ID used to identify users
2 years
_gali
Used by Google Analytics to determine which links on a page are being clicked
30 seconds
_ga_
ID used to identify users
2 years
_gid
ID used to identify users for 24 hours after last activity
24 hours
_gat
Used to monitor number of Google Analytics server requests when using Google Tag Manager
