diff --git a/package-lock.json b/package-lock.json index d85f840..c99de24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0d0f7e1..797cdd7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/common/factory/image-resize.factory.ts b/src/common/factory/image-resize.factory.ts index 4730ee9..f50599d 100644 --- a/src/common/factory/image-resize.factory.ts +++ b/src/common/factory/image-resize.factory.ts @@ -14,11 +14,44 @@ * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ -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 => { + return new Promise((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 => { const rect = { x: size.x, @@ -28,6 +61,7 @@ export class ImageResizeFactory { }; return new Promise((resolve, reject) => { const img = new Image(); + img.crossOrigin = 'anonymous'; img.onload = () => { try { const can = doc.document.createElement('canvas'); diff --git a/src/content-script/command/snapshot/content-page-snapshot-create.command.ts b/src/content-script/command/snapshot/content-page-snapshot-create.command.ts index c9ed135..740e7ca 100644 --- a/src/content-script/command/snapshot/content-page-snapshot-create.command.ts +++ b/src/content-script/command/snapshot/content-page-snapshot-create.command.ts @@ -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> { constructor( @@ -60,11 +61,18 @@ export class ContentPageSnapshotCreateCommand implements ICommand 640 || rect.height > 360) { + screenshot = await ImageResizeFactory.resize2( + { settings: this.settings, document, window }, + { width: 640, height: 360 }, + screenshot + ); + } let segment = undefined; diff --git a/src/service-worker/command/sync/obj/sync-snapshot.command.ts b/src/service-worker/command/sync/obj/sync-snapshot.command.ts index 1f9cbdf..75e449d 100644 --- a/src/service-worker/command/sync/obj/sync-snapshot.command.ts +++ b/src/service-worker/command/sync/obj/sync-snapshot.command.ts @@ -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';