400 lines
10 KiB
JavaScript
400 lines
10 KiB
JavaScript
|
"use strict";
|
|||
|
|
|
|||
|
|
// const { basename, extname } = require("path");
|
|||
|
|
import { basename, extname } from "../../path-browserify/index.js";
|
|||
|
|
//
|
|||
|
|
// Mime type <-> File extension mappings
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
class Format {
|
|||
|
|
constructor() {
|
|||
|
|
let isWeb = (() => typeof global == "undefined")(),
|
|||
|
|
png = "image/png",
|
|||
|
|
jpg = "image/jpeg",
|
|||
|
|
jpeg = "image/jpeg",
|
|||
|
|
webp = "image/webp",
|
|||
|
|
pdf = "application/pdf",
|
|||
|
|
svg = "image/svg+xml";
|
|||
|
|
|
|||
|
|
Object.assign(this, {
|
|||
|
|
toMime: this.toMime.bind(this),
|
|||
|
|
fromMime: this.fromMime.bind(this),
|
|||
|
|
expected: isWeb
|
|||
|
|
? `"png", "jpg", or "webp"`
|
|||
|
|
: `"png", "jpg", "pdf", or "svg"`,
|
|||
|
|
formats: isWeb ? { png, jpg, jpeg, webp } : { png, jpg, jpeg, pdf, svg },
|
|||
|
|
mimes: isWeb
|
|||
|
|
? { [png]: "png", [jpg]: "jpg", [webp]: "webp" }
|
|||
|
|
: { [png]: "png", [jpg]: "jpg", [pdf]: "pdf", [svg]: "svg" }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
toMime(ext) {
|
|||
|
|
return this.formats[(ext || "").replace(/^\./, "").toLowerCase()];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fromMime(mime) {
|
|||
|
|
return this.mimes[mime];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// Validation of the options dict shared by the Canvas saveAs, toBuffer, and toDataURL methods
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
function options(
|
|||
|
|
pages,
|
|||
|
|
{
|
|||
|
|
filename = "",
|
|||
|
|
extension = "",
|
|||
|
|
format,
|
|||
|
|
page,
|
|||
|
|
quality,
|
|||
|
|
matte,
|
|||
|
|
density,
|
|||
|
|
outline,
|
|||
|
|
archive
|
|||
|
|
} = {}
|
|||
|
|
) {
|
|||
|
|
var { fromMime, toMime, expected } = new Format(),
|
|||
|
|
archive = archive || "canvas",
|
|||
|
|
ext = format || extension.replace(/@\d+x$/i, "") || extname(filename),
|
|||
|
|
format = fromMime(toMime(ext) || ext),
|
|||
|
|
mime = toMime(format),
|
|||
|
|
pp = pages.length;
|
|||
|
|
|
|||
|
|
if (!ext)
|
|||
|
|
throw new Error(
|
|||
|
|
`Cannot determine image format (use a filename extension or 'format' argument)`
|
|||
|
|
);
|
|||
|
|
if (!format)
|
|||
|
|
throw new Error(`Unsupported file format "${ext}" (expected ${expected})`);
|
|||
|
|
if (!pp)
|
|||
|
|
throw new RangeError(
|
|||
|
|
`Canvas has no associated contexts (try calling getContext or newPage first)`
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
let padding,
|
|||
|
|
isSequence,
|
|||
|
|
pattern = filename.replace(/{(\d*)}/g, (_, width) => {
|
|||
|
|
isSequence = true;
|
|||
|
|
width = parseInt(width, 10);
|
|||
|
|
padding = isFinite(width) ? width : isFinite(padding) ? padding : -1;
|
|||
|
|
return "{}";
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// allow negative indexing if a specific page is specified
|
|||
|
|
let idx = page > 0 ? page - 1 : page < 0 ? pp + page : undefined;
|
|||
|
|
|
|||
|
|
if ((isFinite(idx) && idx < 0) || idx >= pp)
|
|||
|
|
throw new RangeError(
|
|||
|
|
pp == 1
|
|||
|
|
? `Canvas only has a ‘page 1’ (${idx} is out of bounds)`
|
|||
|
|
: `Canvas has pages 1–${pp} (${idx} is out of bounds)`
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
pages = isFinite(idx)
|
|||
|
|
? [pages[idx]]
|
|||
|
|
: isSequence || format == "pdf"
|
|||
|
|
? pages
|
|||
|
|
: pages.slice(-1); // default to the 'current' context
|
|||
|
|
|
|||
|
|
if (quality === undefined) {
|
|||
|
|
quality = 0.92;
|
|||
|
|
} else {
|
|||
|
|
if (
|
|||
|
|
typeof quality != "number" ||
|
|||
|
|
!isFinite(quality) ||
|
|||
|
|
quality < 0 ||
|
|||
|
|
quality > 1
|
|||
|
|
) {
|
|||
|
|
throw new TypeError(
|
|||
|
|
"The quality option must be an number in the 0.0–1.0 range"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (density === undefined) {
|
|||
|
|
let m = (extension || basename(filename, ext)).match(/@(\d+)x$/i);
|
|||
|
|
density = m ? parseInt(m[1], 10) : 1;
|
|||
|
|
} else if (
|
|||
|
|
typeof density != "number" ||
|
|||
|
|
!Number.isInteger(density) ||
|
|||
|
|
density < 1
|
|||
|
|
) {
|
|||
|
|
throw new TypeError("The density option must be a non-negative integer");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (outline === undefined) {
|
|||
|
|
outline = true;
|
|||
|
|
} else if (format == "svg") {
|
|||
|
|
outline = !!outline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
filename,
|
|||
|
|
pattern,
|
|||
|
|
format,
|
|||
|
|
mime,
|
|||
|
|
pages,
|
|||
|
|
padding,
|
|||
|
|
quality,
|
|||
|
|
matte,
|
|||
|
|
density,
|
|||
|
|
outline,
|
|||
|
|
archive
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// Zip (pace Phil Katz & q.v. https://github.com/jimmywarting/StreamSaver.js)
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
class Crc32 {
|
|||
|
|
static for(data) {
|
|||
|
|
return new Crc32().append(data).get();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
constructor() {
|
|||
|
|
this.crc = -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get() {
|
|||
|
|
return ~this.crc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
append(data) {
|
|||
|
|
var crc = this.crc | 0,
|
|||
|
|
table = this.table;
|
|||
|
|
for (var offset = 0, len = data.length | 0; offset < len; offset++) {
|
|||
|
|
crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xff];
|
|||
|
|
}
|
|||
|
|
this.crc = crc;
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Crc32.prototype.table = (() => {
|
|||
|
|
var i,
|
|||
|
|
j,
|
|||
|
|
t,
|
|||
|
|
table = [];
|
|||
|
|
for (i = 0; i < 256; i++) {
|
|||
|
|
t = i;
|
|||
|
|
for (j = 0; j < 8; j++) {
|
|||
|
|
t = t & 1 ? (t >>> 1) ^ 0xedb88320 : t >>> 1;
|
|||
|
|
}
|
|||
|
|
table[i] = t;
|
|||
|
|
}
|
|||
|
|
return table;
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
function calloc(size) {
|
|||
|
|
let array = new Uint8Array(size),
|
|||
|
|
view = new DataView(array.buffer),
|
|||
|
|
buf = {
|
|||
|
|
array,
|
|||
|
|
view,
|
|||
|
|
size,
|
|||
|
|
set8(at, to) {
|
|||
|
|
view.setUint8(at, to);
|
|||
|
|
return buf;
|
|||
|
|
},
|
|||
|
|
set16(at, to) {
|
|||
|
|
view.setUint16(at, to, true);
|
|||
|
|
return buf;
|
|||
|
|
},
|
|||
|
|
set32(at, to) {
|
|||
|
|
view.setUint32(at, to, true);
|
|||
|
|
return buf;
|
|||
|
|
},
|
|||
|
|
bytes(at, to) {
|
|||
|
|
array.set(to, at);
|
|||
|
|
return buf;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return buf;
|
|||
|
|
}
|
|||
|
|
// const TextEncoder=require('util').TextEncoder
|
|||
|
|
|
|||
|
|
class Zip {
|
|||
|
|
constructor(directory) {
|
|||
|
|
let now = new Date();
|
|||
|
|
Object.assign(this, {
|
|||
|
|
directory,
|
|||
|
|
offset: 0,
|
|||
|
|
files: [],
|
|||
|
|
time:
|
|||
|
|
(((now.getHours() << 6) | now.getMinutes()) << 5) |
|
|||
|
|
(now.getSeconds() / 2),
|
|||
|
|
date:
|
|||
|
|
((((now.getFullYear() - 1980) << 4) | (now.getMonth() + 1)) << 5) |
|
|||
|
|
now.getDate()
|
|||
|
|
});
|
|||
|
|
this.add(directory);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async add(filename, blob) {
|
|||
|
|
let folder = !blob,
|
|||
|
|
name = Zip.encoder.encode(`${this.directory}/${folder ? "" : filename}`),
|
|||
|
|
data = new Uint8Array(folder ? 0 : await blob.arrayBuffer()),
|
|||
|
|
preamble = 30 + name.length,
|
|||
|
|
descriptor = preamble + data.length,
|
|||
|
|
postamble = 16,
|
|||
|
|
{ offset } = this;
|
|||
|
|
|
|||
|
|
let header = calloc(26)
|
|||
|
|
.set32(0, 0x08080014) // zip version
|
|||
|
|
.set16(6, this.time) // time
|
|||
|
|
.set16(8, this.date) // date
|
|||
|
|
.set32(10, Crc32.for(data)) // checksum
|
|||
|
|
.set32(14, data.length) // compressed size (w/ zero compression)
|
|||
|
|
.set32(18, data.length) // un-compressed size
|
|||
|
|
.set16(22, name.length); // filename length (utf8 bytes)
|
|||
|
|
offset += preamble;
|
|||
|
|
|
|||
|
|
let payload = calloc(preamble + data.length + postamble)
|
|||
|
|
.set32(0, 0x04034b50) // local header signature
|
|||
|
|
.bytes(4, header.array) // ...header fields...
|
|||
|
|
.bytes(30, name) // filename
|
|||
|
|
.bytes(preamble, data); // blob bytes
|
|||
|
|
offset += data.length;
|
|||
|
|
|
|||
|
|
payload
|
|||
|
|
.set32(descriptor, 0x08074b50) // signature
|
|||
|
|
.bytes(descriptor + 4, header.array.slice(10, 22)); // length & filemame
|
|||
|
|
offset += postamble;
|
|||
|
|
|
|||
|
|
this.files.push({ offset, folder, name, header, payload });
|
|||
|
|
this.offset = offset;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
toBuffer() {
|
|||
|
|
// central directory record
|
|||
|
|
let length = this.files.reduce(
|
|||
|
|
(len, { name }) => 46 + name.length + len,
|
|||
|
|
0
|
|||
|
|
),
|
|||
|
|
cdr = calloc(length + 22),
|
|||
|
|
index = 0;
|
|||
|
|
|
|||
|
|
for (var { offset, name, header, folder } of this.files) {
|
|||
|
|
cdr
|
|||
|
|
.set32(index, 0x02014b50) // archive file signature
|
|||
|
|
.set16(index + 4, 0x0014) // version
|
|||
|
|
.bytes(index + 6, header.array) // ...header fields...
|
|||
|
|
.set8(index + 38, folder ? 0x10 : 0) // is_dir flag
|
|||
|
|
.set32(index + 42, offset) // file offset
|
|||
|
|
.bytes(index + 46, name); // filename
|
|||
|
|
index += 46 + name.length;
|
|||
|
|
}
|
|||
|
|
cdr
|
|||
|
|
.set32(index, 0x06054b50) // signature
|
|||
|
|
.set16(index + 8, this.files.length) // № files per-segment
|
|||
|
|
.set16(index + 10, this.files.length) // № files this segment
|
|||
|
|
.set32(index + 12, length) // central directory length
|
|||
|
|
.set32(index + 16, this.offset); // file-offset of directory
|
|||
|
|
|
|||
|
|
// concatenated zipfile data
|
|||
|
|
let output = new Uint8Array(this.offset + cdr.size),
|
|||
|
|
cursor = 0;
|
|||
|
|
|
|||
|
|
for (var { payload } of this.files) {
|
|||
|
|
output.set(payload.array, cursor);
|
|||
|
|
cursor += payload.size;
|
|||
|
|
}
|
|||
|
|
output.set(cdr.array, cursor);
|
|||
|
|
|
|||
|
|
return output;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get blob() {
|
|||
|
|
return new Blob([this.toBuffer()], { type: "application/zip" });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
Zip.encoder = new TextEncoder();
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// Browser helpers for converting canvas elements to blobs/buffers/files/zips
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
const asBlob = (canvas, mime, quality, matte) => {
|
|||
|
|
if (matte) {
|
|||
|
|
let { width, height } = canvas,
|
|||
|
|
comp = Object.assign(document.createElement("canvas"), { width, height }),
|
|||
|
|
ctx = comp.getContext("2d");
|
|||
|
|
ctx.fillStyle = matte;
|
|||
|
|
ctx.fillRect(0, 0, width, height);
|
|||
|
|
ctx.drawImage(canvas, 0, 0);
|
|||
|
|
canvas = comp;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return new Promise((res, rej) => canvas.toBlob(res, mime, quality));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const asBuffer = (...args) => asBlob(...args).then(b => b.arrayBuffer());
|
|||
|
|
|
|||
|
|
const asDownload = async (canvas, mime, quality, matte, filename) => {
|
|||
|
|
_download(filename, await asBlob(canvas, mime, quality, matte));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const asZipDownload = async (
|
|||
|
|
pages,
|
|||
|
|
mime,
|
|||
|
|
quality,
|
|||
|
|
matte,
|
|||
|
|
archive,
|
|||
|
|
pattern,
|
|||
|
|
padding
|
|||
|
|
) => {
|
|||
|
|
let filenames = i =>
|
|||
|
|
pattern.replace("{}", String(i + 1).padStart(padding, "0")),
|
|||
|
|
folder = basename(archive, ".zip") || "archive",
|
|||
|
|
zip = new Zip(folder);
|
|||
|
|
|
|||
|
|
await Promise.all(
|
|||
|
|
pages.map(async (page, i) => {
|
|||
|
|
let filename = filenames(i); // serialize filename(s) before awaiting
|
|||
|
|
await zip.add(filename, await asBlob(page, mime, quality, matte));
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
_download(`${folder}.zip`, zip.blob);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const _download = (filename, blob) => {
|
|||
|
|
const href = window.URL.createObjectURL(blob),
|
|||
|
|
link = document.createElement("a");
|
|||
|
|
link.style.display = "none";
|
|||
|
|
link.href = href;
|
|||
|
|
link.setAttribute("download", filename);
|
|||
|
|
if (typeof link.download === "undefined") {
|
|||
|
|
link.setAttribute("target", "_blank");
|
|||
|
|
}
|
|||
|
|
document.body.appendChild(link);
|
|||
|
|
link.click();
|
|||
|
|
document.body.removeChild(link);
|
|||
|
|
setTimeout(() => window.URL.revokeObjectURL(href), 100);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const atScale = (pages, density, matte) =>
|
|||
|
|
pages.map(page => {
|
|||
|
|
if (density == 1 && !matte) return page.canvas;
|
|||
|
|
|
|||
|
|
let scaled = document.createElement("canvas"),
|
|||
|
|
ctx = scaled.getContext("2d"),
|
|||
|
|
src = page.canvas ? page.canvas : page;
|
|||
|
|
scaled.width = src.width * density;
|
|||
|
|
scaled.height = src.height * density;
|
|||
|
|
if (matte) {
|
|||
|
|
ctx.fillStyle = matte;
|
|||
|
|
ctx.fillRect(0, 0, scaled.width, scaled.height);
|
|||
|
|
}
|
|||
|
|
ctx.scale(density, density);
|
|||
|
|
ctx.drawImage(src, 0, 0);
|
|||
|
|
return scaled;
|
|||
|
|
});
|
|||
|
|
const obj = { asBuffer, asDownload, asZipDownload, atScale, options };
|
|||
|
|
export default obj;
|
|||
|
|
// module.exports = { asBuffer, asDownload, asZipDownload, atScale, options };
|