feat: capture thumbnail resize to 640/360
This commit is contained in:
parent
7cdf9b8509
commit
5d0b5da2c6
49
package-lock.json
generated
49
package-lock.json
generated
@ -14,7 +14,7 @@
|
||||
"@mui/icons-material": "^5.8.4",
|
||||
"@mui/material": "^5.9.3",
|
||||
"@mui/x-date-pickers": "^6.1.0",
|
||||
"@pinmenote/browser-api": "^0.0.5",
|
||||
"@pinmenote/browser-api": "file:../browser-api",
|
||||
"@pinmenote/fetch-service": "file:../fetch-service",
|
||||
"@pinmenote/page-compute": "file:../page-compute",
|
||||
"@pinmenote/tiny-dispatcher": "^0.0.4",
|
||||
@ -73,6 +73,27 @@
|
||||
"typescript": "^5.1.6"
|
||||
}
|
||||
},
|
||||
"../browser-api": {
|
||||
"version": "0.0.5",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@parcel/packager-ts": "^2.9.2",
|
||||
"@parcel/transformer-typescript-tsc": "^2.9.2",
|
||||
"@parcel/transformer-typescript-types": "^2.9.2",
|
||||
"@types/chrome": "^0.0.237",
|
||||
"@types/firefox-webext-browser": "^111.0.1",
|
||||
"@types/node": "^20.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.48.2",
|
||||
"@typescript-eslint/parser": "^5.48.2",
|
||||
"eslint": "^8.32.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"parcel": "^2.9.2",
|
||||
"pre-commit": "^1.2.2",
|
||||
"typescript": "^4.9.4",
|
||||
"uglify-js": "^3.17.4"
|
||||
}
|
||||
},
|
||||
"../fetch-service": {
|
||||
"name": "@pinmenote/fetch-service",
|
||||
"version": "0.0.4",
|
||||
@ -17076,9 +17097,8 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@pinmenote/browser-api": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@pinmenote/browser-api/-/browser-api-0.0.5.tgz",
|
||||
"integrity": "sha512-LUteZZMLfVuCtaOxrtSnDIdLEZCZ6loB/P1rHZbjXo72cMiDJnMeg4UsQ/RzH/MH5zfa50iB1ct+72NhJCMFFw=="
|
||||
"resolved": "../browser-api",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@pinmenote/fetch-service": {
|
||||
"resolved": "../fetch-service",
|
||||
@ -32969,9 +32989,24 @@
|
||||
}
|
||||
},
|
||||
"@pinmenote/browser-api": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@pinmenote/browser-api/-/browser-api-0.0.5.tgz",
|
||||
"integrity": "sha512-LUteZZMLfVuCtaOxrtSnDIdLEZCZ6loB/P1rHZbjXo72cMiDJnMeg4UsQ/RzH/MH5zfa50iB1ct+72NhJCMFFw=="
|
||||
"version": "file:../browser-api",
|
||||
"requires": {
|
||||
"@parcel/packager-ts": "^2.9.2",
|
||||
"@parcel/transformer-typescript-tsc": "^2.9.2",
|
||||
"@parcel/transformer-typescript-types": "^2.9.2",
|
||||
"@types/chrome": "^0.0.237",
|
||||
"@types/firefox-webext-browser": "^111.0.1",
|
||||
"@types/node": "^20.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.48.2",
|
||||
"@typescript-eslint/parser": "^5.48.2",
|
||||
"eslint": "^8.32.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"parcel": "^2.9.2",
|
||||
"pre-commit": "^1.2.2",
|
||||
"typescript": "^4.9.4",
|
||||
"uglify-js": "^3.17.4"
|
||||
}
|
||||
},
|
||||
"@pinmenote/fetch-service": {
|
||||
"version": "file:../fetch-service",
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
"@mui/icons-material": "^5.8.4",
|
||||
"@mui/material": "^5.9.3",
|
||||
"@mui/x-date-pickers": "^6.1.0",
|
||||
"@pinmenote/browser-api": "^0.0.5",
|
||||
"@pinmenote/browser-api": "file:../browser-api",
|
||||
"@pinmenote/fetch-service": "file:../fetch-service",
|
||||
"@pinmenote/page-compute": "file:../page-compute",
|
||||
"@pinmenote/tiny-dispatcher": "^0.0.4",
|
||||
|
||||
@ -14,11 +14,44 @@
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import { ObjRectangleDto } from '../model/obj/obj-utils.dto';
|
||||
import { ObjRectangleDto, ObjSizeDto } from '../model/obj/obj-utils.dto';
|
||||
import { PinDocument } from '../components/pin/model/pin-view.model';
|
||||
import { fnConsoleLog } from '../fn/fn-console';
|
||||
|
||||
export class ImageResizeFactory {
|
||||
static resize2 = (doc: PinDocument, size: ObjSizeDto, b64image: string): Promise<string> => {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = () => {
|
||||
try {
|
||||
const can = doc.document.createElement('canvas');
|
||||
const wr = size.width / img.naturalWidth;
|
||||
const hr = size.height / img.naturalHeight;
|
||||
fnConsoleLog('AAAAAAAAAAAAAAAAAAAAAAAAAaa', wr, hr);
|
||||
can.width = img.naturalWidth * wr;
|
||||
can.height = img.naturalHeight * hr;
|
||||
const ctx = can.getContext('2d');
|
||||
ctx?.drawImage(img, 0, 0, can.width, can.height);
|
||||
b64image = can.toDataURL(`image/${doc.settings.screenshotFormat}`, doc.settings.screenshotQuality);
|
||||
} finally {
|
||||
window.URL.revokeObjectURL(b64image);
|
||||
img.onerror = null;
|
||||
img.onload = null;
|
||||
// Resolve here
|
||||
resolve(b64image);
|
||||
}
|
||||
};
|
||||
img.onerror = (event, source, lineno, colno, error) => {
|
||||
window.URL.revokeObjectURL(b64image);
|
||||
img.onerror = null;
|
||||
img.onload = null;
|
||||
reject(error);
|
||||
fnConsoleLog('ImageResizeFactory->resize', error);
|
||||
};
|
||||
img.src = b64image;
|
||||
});
|
||||
};
|
||||
static resize = (doc: PinDocument, size: ObjRectangleDto, b64image: string): Promise<string> => {
|
||||
const rect = {
|
||||
x: size.x,
|
||||
@ -28,6 +61,7 @@ export class ImageResizeFactory {
|
||||
};
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = () => {
|
||||
try {
|
||||
const can = doc.document.createElement('canvas');
|
||||
|
||||
@ -33,6 +33,7 @@ import { SettingsConfig } from '../../../common/environment';
|
||||
import { XpathFactory } from '../../../common/factory/xpath.factory';
|
||||
import { fnConsoleLog } from '../../../common/fn/fn-console';
|
||||
import { fnSha256Object } from '../../../common/fn/fn-hash';
|
||||
import { ImageResizeFactory } from '../../../common/factory/image-resize.factory';
|
||||
|
||||
export class ContentPageSnapshotCreateCommand implements ICommand<Promise<PageSnapshotDto>> {
|
||||
constructor(
|
||||
@ -60,11 +61,18 @@ export class ContentPageSnapshotCreateCommand implements ICommand<Promise<PageSn
|
||||
isPartial = true;
|
||||
}
|
||||
|
||||
const screenshot = await ScreenshotFactory.takeScreenshot(
|
||||
let screenshot = await ScreenshotFactory.takeScreenshot(
|
||||
{ settings: this.settings, document, window },
|
||||
rect,
|
||||
this.url
|
||||
);
|
||||
if (rect.width > 640 || rect.height > 360) {
|
||||
screenshot = await ImageResizeFactory.resize2(
|
||||
{ settings: this.settings, document, window },
|
||||
{ width: 640, height: 360 },
|
||||
screenshot
|
||||
);
|
||||
}
|
||||
|
||||
let segment = undefined;
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ import { ObjDto } from '../../../../common/model/obj/obj.dto';
|
||||
import { ObjPageDto } from '../../../../common/model/obj/obj-page.dto';
|
||||
import { PageSegmentGetCommand } from '../../../../common/command/snapshot/segment/page-segment-get.command';
|
||||
import { SyncObjectCommand } from './sync-object.command';
|
||||
import { SyncHashType, SyncObjectStatus, SyncProgress } from '../sync.model';
|
||||
import { SyncHashType, SyncObjectStatus } from '../sync.model';
|
||||
import { fnConsoleLog } from '../../../../common/fn/fn-console';
|
||||
import { BeginTxResponse } from '../../api/store/api-store.model';
|
||||
import { PageSnapshotDto } from '../../../../common/model/obj/page-snapshot.dto';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user