Skip to content

Commit 8b008d9

Browse files
hoothinhoothin
committed
Update Picviewer CE+.user.js
1 parent fb43feb commit 8b008d9

File tree

1 file changed

+73
-45
lines changed

1 file changed

+73
-45
lines changed

‎Picviewer CE+/Picviewer CE+.user.js‎

Lines changed: 73 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -23984,8 +23984,6 @@ ImgOps | https://imgops.com/#b#`;
2398423984
return list;
2398523985
},
2398623986
getImgSrc: function(img) {
23987-
const original = this.getOriginalImgSrc(img);
23988-
if (original) return original;
2398923987
return img.currentSrc || img.src || img.getAttribute('data-src') || img.getAttribute('data-original') || img.getAttribute('data-lazy-src') || img.getAttribute('data-zoom-image') || img.getAttribute('data-large');
2399023988
},
2399123989
getOriginalImgSrc: function(img) {
@@ -24016,15 +24014,22 @@ ImgOps | https://imgops.com/#b#`;
2401624014
return "";
2401724015
},
2401824016
openPreview: function(selected) {
24019-
const srcs = [];
24017+
const sources = [];
2402024018
selected.forEach((img) => {
24021-
const src = this.getImgSrc(img);
24022-
if (src) srcs.push(src);
24019+
const current = this.getImgSrc(img);
24020+
const original = this.getOriginalImgSrc(img);
24021+
const displaySrc = current || original;
24022+
if (displaySrc) {
24023+
sources.push({
24024+
current: displaySrc,
24025+
original: original && original !== displaySrc ? original : ''
24026+
});
24027+
}
2402324028
img.classList.remove('pv-stitch-selected');
2402424029
this.toggleParentClass(img, false);
2402524030
});
2402624031
this.selected.clear();
24027-
if (!srcs.length) return;
24032+
if (!sources.length) return;
2402824033
if (this.previewing) return;
2402924034
this.previewing = true;
2403024035
this.addStyle();
@@ -24058,13 +24063,14 @@ ImgOps | https://imgops.com/#b#`;
2405824063
const stage = overlay.querySelector('.pv-stitch-stage');
2405924064
const actionPanel = overlay.querySelector('.pv-stitch-panel-action');
2406024065
this.placeActionPanel(stage, actionPanel);
24061-
srcs.forEach((src) => {
24066+
sources.forEach((source) => {
2406224067
const item = document.createElement('div');
2406324068
item.className = 'pv-stitch-item';
2406424069
item.setAttribute('draggable', 'true');
24065-
item.dataset.src = src;
24070+
item.dataset.src = source.current;
24071+
if (source.original) item.dataset.original = source.original;
2406624072
const img = document.createElement('img');
24067-
img.src = src;
24073+
img.src = source.current;
2406824074
img.addEventListener('load', () => this.placeActionPanel(stage, actionPanel));
2406924075
item.appendChild(img);
2407024076
itemsCon.appendChild(item);
@@ -24103,7 +24109,10 @@ ImgOps | https://imgops.com/#b#`;
2410324109
this.placeActionPanel(stage, actionPanel);
2410424110
});
2410524111
overlay.querySelector('.pv-stitch-action-done').addEventListener('click', async () => {
24106-
const ordered = Array.from(itemsCon.querySelectorAll('.pv-stitch-item')).map(item => item.dataset.src);
24112+
const ordered = Array.from(itemsCon.querySelectorAll('.pv-stitch-item')).map(item => ({
24113+
current: item.dataset.src,
24114+
original: item.dataset.original || ''
24115+
}));
2410724116
this.closePreview();
2410824117
await this.renderStitch(ordered, this.layout);
2410924118
});
@@ -24211,49 +24220,68 @@ ImgOps | https://imgops.com/#b#`;
2421124220
});
2421224221
});
2421324222
},
24214-
renderStitch: async function(srcs, layout) {
24215-
if (!srcs || !srcs.length) return;
24216-
try {
24217-
const loaded = await Promise.all(srcs.map(src => this.loadImageForStitch(src)));
24218-
let totalW = 0;
24219-
let totalH = 0;
24223+
createStitchBlobUrl: async function(srcs, layout) {
24224+
const loaded = await Promise.all(srcs.map(src => this.loadImageForStitch(src)));
24225+
let totalW = 0;
24226+
let totalH = 0;
24227+
if (layout === 'column') {
24228+
loaded.forEach(({img}) => {
24229+
totalW = Math.max(totalW, img.naturalWidth || img.width);
24230+
totalH += img.naturalHeight || img.height;
24231+
});
24232+
} else {
24233+
loaded.forEach(({img}) => {
24234+
totalW += img.naturalWidth || img.width;
24235+
totalH = Math.max(totalH, img.naturalHeight || img.height);
24236+
});
24237+
}
24238+
const canvas = document.createElement('canvas');
24239+
canvas.width = Math.max(1, totalW);
24240+
canvas.height = Math.max(1, totalH);
24241+
const ctx = canvas.getContext('2d');
24242+
let offset = 0;
24243+
loaded.forEach(({img}) => {
24244+
const w = img.naturalWidth || img.width;
24245+
const h = img.naturalHeight || img.height;
2422024246
if (layout === 'column') {
24221-
loaded.forEach(({img}) => {
24222-
totalW = Math.max(totalW, img.naturalWidth || img.width);
24223-
totalH += img.naturalHeight || img.height;
24224-
});
24247+
ctx.drawImage(img, 0, offset, w, h);
24248+
offset += h;
2422524249
} else {
24226-
loaded.forEach(({img}) => {
24227-
totalW += img.naturalWidth || img.width;
24228-
totalH = Math.max(totalH, img.naturalHeight || img.height);
24229-
});
24250+
ctx.drawImage(img, offset, 0, w, h);
24251+
offset += w;
2423024252
}
24231-
const canvas = document.createElement('canvas');
24232-
canvas.width = Math.max(1, totalW);
24233-
canvas.height = Math.max(1, totalH);
24234-
const ctx = canvas.getContext('2d');
24235-
let offset = 0;
24236-
loaded.forEach(({img}) => {
24237-
const w = img.naturalWidth || img.width;
24238-
const h = img.naturalHeight || img.height;
24239-
if (layout === 'column') {
24240-
ctx.drawImage(img, 0, offset, w, h);
24241-
offset += h;
24242-
} else {
24243-
ctx.drawImage(img, offset, 0, w, h);
24244-
offset += w;
24245-
}
24246-
});
24247-
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
24248-
loaded.forEach(({revoke}) => revoke && revoke());
24249-
if (!blob) return;
24250-
const blobUrl = unsafeWindow.URL.createObjectURL(blob);
24253+
});
24254+
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
24255+
loaded.forEach(({revoke}) => revoke && revoke());
24256+
if (!blob) return '';
24257+
return unsafeWindow.URL.createObjectURL(blob);
24258+
},
24259+
renderStitch: async function(items, layout) {
24260+
if (!items || !items.length) return;
24261+
try {
24262+
const currentSrcs = items.map(item => item.current || item.src || item);
24263+
if (currentSrcs.some(src => !src)) return;
24264+
const blobUrl = await this.createStitchBlobUrl(currentSrcs, layout);
24265+
if (!blobUrl) return;
2425124266
const outImg = new Image();
2425224267
outImg.src = blobUrl;
2425324268
outImg.title = document.title || '';
2425424269
outImg.alt = outImg.title;
2425524270
const data = {img: outImg, imgSrc: blobUrl, src: blobUrl, srcs: [blobUrl]};
24256-
new ImgWindowC(outImg, data, true);
24271+
const imgWin = new ImgWindowC(outImg, data, true);
24272+
const finalSrcs = items.map((item, index) => item.original || currentSrcs[index]);
24273+
const needsReplace = finalSrcs.some((src, index) => src && src !== currentSrcs[index]);
24274+
if (!needsReplace) return;
24275+
this.createStitchBlobUrl(finalSrcs, layout).then((finalBlobUrl) => {
24276+
if (!finalBlobUrl) return;
24277+
if (!imgWin || imgWin.removed) {
24278+
unsafeWindow.URL.revokeObjectURL(finalBlobUrl);
24279+
return;
24280+
}
24281+
imgWin.changeData({img: imgWin.img, imgSrc: finalBlobUrl, src: finalBlobUrl, srcs: [finalBlobUrl]});
24282+
}).catch((e) => {
24283+
console.warn('[Picviewer CE+] stitch replace failed', e);
24284+
});
2425724285
} catch (e) {
2425824286
console.warn('[Picviewer CE+] stitch failed', e);
2425924287
}

0 commit comments

Comments
 (0)