515 lines
10 KiB
JavaScript
515 lines
10 KiB
JavaScript
function bytesToImgData(bytes) {
|
|
const nPixel = Math.ceil(bytes.length / 3)
|
|
const side = Math.ceil(Math.sqrt(nPixel))
|
|
const u32 = new Uint32Array(side * side)
|
|
|
|
// out of bounds => 0
|
|
for (let i = 0, j = 0; i < nPixel; i++, j += 3) {
|
|
u32[i] = // 0xAABBGGRR
|
|
bytes[j + 0] << 0 | // R
|
|
bytes[j + 1] << 8 | // G
|
|
bytes[j + 2] << 16 | // B
|
|
0xff000000 // A (255)
|
|
}
|
|
u32.fill(0xff000000, nPixel)
|
|
|
|
const u8 = new Uint8ClampedArray(u32.buffer)
|
|
return new ImageData(u8, side, side)
|
|
}
|
|
|
|
|
|
let hashExp
|
|
|
|
function canvasToBlob(canvas) {
|
|
return new Promise(resolve => {
|
|
canvas.toBlob(blob => {
|
|
resolve(blob)
|
|
})
|
|
})
|
|
}
|
|
|
|
let canvas
|
|
|
|
async function pack() {
|
|
const bytes = bundle()
|
|
const imgData = bytesToImgData(bytes)
|
|
console.log(imgData.width + '*' + imgData.height, 'bytes:', bytes.length)
|
|
|
|
hashExp = await sha256(imgData.data)
|
|
|
|
canvas = document.createElement('canvas')
|
|
canvas.width = imgData.width
|
|
canvas.height = imgData.height
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
ctx.putImageData(imgData, 0, 0)
|
|
|
|
const blob = await canvasToBlob(canvas)
|
|
imgPreview.src = URL.createObjectURL(blob)
|
|
divPreview.hidden = false
|
|
|
|
const {width, height} = canvas
|
|
const size = blob.size.toLocaleString()
|
|
imgPreview.title = `${width}*${height} [${size} Bytes]`
|
|
}
|
|
|
|
let previewWin
|
|
|
|
self.onmessage = function(e) {
|
|
if (e.source === previewWin && e.data === 'GET_PREVIEW_DATA') {
|
|
const imgDataUrl = canvas.toDataURL()
|
|
previewWin.postMessage(imgDataUrl, '*')
|
|
}
|
|
}
|
|
|
|
function getPreviewFile() {
|
|
if (confMap['index.html']) {
|
|
return ''
|
|
}
|
|
const files = Object.keys(confMap)
|
|
const html = files.find(v => v.endsWith('.html'))
|
|
if (html) {
|
|
return html
|
|
}
|
|
return files[0]
|
|
}
|
|
|
|
btnPreview.onclick = function() {
|
|
const rand = (Math.random() * 0xffffffff >>> 0).toString(36)
|
|
const site = `https://web2img-preview-${rand}.etherdream.com/`
|
|
|
|
previewWin = open(site + getPreviewFile())
|
|
}
|
|
|
|
|
|
function verifyConf(str) {
|
|
const conf = parseJson(str)
|
|
if (!conf || typeof conf !== 'object') {
|
|
return 'invalid conf'
|
|
}
|
|
const pairs = Object.entries(conf)
|
|
if (pairs.length === 0) {
|
|
return 'empty conf'
|
|
}
|
|
for (const [path, headers] of pairs) {
|
|
const data = dataMap[path]
|
|
if (!data) {
|
|
return `file not found: ${path}`
|
|
}
|
|
if (typeof headers !== 'object') {
|
|
return `invalid header type: ${path}`
|
|
}
|
|
if (headers['content-length'] != data.length) {
|
|
headers['content-length'] = data.length
|
|
console.warn('fix content-length:', path)
|
|
}
|
|
try {
|
|
var res = new Response('', {headers})
|
|
} catch (err) {
|
|
return `invalid headers: ${path}`
|
|
}
|
|
for (const k in headers) {
|
|
if (!res.headers.has(k)) {
|
|
return `unsupported header: ${k} (${path})`
|
|
}
|
|
}
|
|
conf[path] = Object.fromEntries(res.headers)
|
|
}
|
|
confMap = conf
|
|
return ''
|
|
}
|
|
|
|
let lastConf
|
|
|
|
txtConf.onchange = async function() {
|
|
if (lastConf === this.value) {
|
|
return
|
|
}
|
|
lastConf = this.value
|
|
|
|
const err = verifyConf(lastConf)
|
|
showConfWarn(err)
|
|
if (err) {
|
|
return
|
|
}
|
|
await pack()
|
|
}
|
|
|
|
function bundle() {
|
|
const confStr = JSON.stringify(confMap) + '\r'
|
|
const confBin = strToBytes(confStr)
|
|
const bufs = [confBin]
|
|
|
|
for (const path of Object.keys(confMap)) {
|
|
const data = dataMap[path]
|
|
bufs.push(data)
|
|
}
|
|
return concatBufs(bufs)
|
|
}
|
|
|
|
//
|
|
// utils
|
|
//
|
|
function strToBytes(str) {
|
|
return new TextEncoder().encode(str)
|
|
}
|
|
|
|
function bytesToB64(bytes) {
|
|
return btoa(String.fromCharCode.apply(null, bytes))
|
|
}
|
|
|
|
function parseJson(str) {
|
|
try {
|
|
return JSON.parse(str)
|
|
} catch (err) {
|
|
}
|
|
}
|
|
|
|
function parseUrl(url) {
|
|
try {
|
|
return new URL(url)
|
|
} catch (err) {
|
|
}
|
|
}
|
|
|
|
function parseRegExp(str) {
|
|
try {
|
|
return RegExp(str)
|
|
} catch (err) {
|
|
}
|
|
}
|
|
|
|
function concatBufs(bufs) {
|
|
let size = 0
|
|
for (const buf of bufs) {
|
|
size += buf.length
|
|
}
|
|
const ret = new Uint8Array(size)
|
|
let pos = 0
|
|
for (const v of bufs) {
|
|
ret.set(v, pos)
|
|
pos += v.length
|
|
}
|
|
return ret
|
|
}
|
|
|
|
async function sha256(bytes) {
|
|
const buf = await crypto.subtle.digest('SHA-256', bytes)
|
|
return new Uint8Array(buf)
|
|
}
|
|
|
|
function isArrayEqual(b1, b2) {
|
|
if (b1.length !== b2.length) {
|
|
return false
|
|
}
|
|
for (let i = 0; i < b1.length; i++) {
|
|
if (b1[i] !== b2[i]) {
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
|
|
function showConfUI() {
|
|
const confStr = JSON.stringify(confMap, null, '\t')
|
|
if (confStr === '{}') {
|
|
return
|
|
}
|
|
txtConf.value = confStr
|
|
txtConf.classList.remove('fold')
|
|
txtConf.readOnly = false
|
|
txtUrls.value = ''
|
|
txtJs.value = ''
|
|
txtJs.classList.add('fold')
|
|
optPrivacy.disabled = true
|
|
chkMinify.disabled = true
|
|
pack()
|
|
}
|
|
|
|
function showConfWarn(msg) {
|
|
txtConfWarn.textContent = msg
|
|
}
|
|
|
|
function showUrlsWarn(msg) {
|
|
txtUrlsWarn.textContent = msg
|
|
}
|
|
|
|
function showCodeWarn(msg) {
|
|
txtCodeWarn.textContent = msg
|
|
}
|
|
|
|
function verifyImage(url) {
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image()
|
|
|
|
img.onload = async () => {
|
|
if (!hashExp) {
|
|
resolve()
|
|
return
|
|
}
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = img.width
|
|
canvas.height = img.height
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
ctx.drawImage(img, 0, 0)
|
|
|
|
const imgData = ctx.getImageData(0, 0, img.width, img.height)
|
|
const hashGot = await sha256(imgData.data)
|
|
|
|
if (isArrayEqual(hashGot, hashExp)) {
|
|
resolve()
|
|
} else {
|
|
reject('hash incorrect')
|
|
}
|
|
}
|
|
img.onerror = () => {
|
|
reject('failed to load')
|
|
}
|
|
img.crossOrigin = true
|
|
img.referrerPolicy = 'no-referrer'
|
|
img.src = url
|
|
})
|
|
}
|
|
|
|
async function verifyUrls(urls) {
|
|
for (const url of urls) {
|
|
const urlObj = parseUrl(url)
|
|
if (!urlObj || !/^https?:/.test(urlObj.protocol)) {
|
|
return `invalid url: ${url}`
|
|
}
|
|
try {
|
|
await verifyImage(url)
|
|
} catch(err) {
|
|
return `${err}: ${url}`
|
|
}
|
|
}
|
|
return ''
|
|
}
|
|
|
|
let tmplCode
|
|
let imgUrls
|
|
|
|
async function genCode() {
|
|
try {
|
|
const res = await fetch('assets/js/tmpl.js')
|
|
tmplCode = await res.text()
|
|
} catch (err) {
|
|
showCodeWarn('failed to load code')
|
|
return
|
|
}
|
|
const privacy = optPrivacy.options[optPrivacy.selectedIndex].value
|
|
const hashStr = hashExp ? bytesToB64(hashExp) : ''
|
|
const urlsStr = imgUrls.join("', '")
|
|
let js = `\
|
|
var HASH = '${hashStr}'
|
|
var URLS = ['${urlsStr}']
|
|
var PRIVACY = ${privacy}
|
|
|
|
${tmplCode}
|
|
`
|
|
if (chkMinify.checked) {
|
|
try {
|
|
const ret = await Terser.minify(js, {
|
|
enclose: true,
|
|
compress: {
|
|
global_defs: {
|
|
RELEASE: 1,
|
|
},
|
|
}
|
|
})
|
|
js = ret.code
|
|
} catch (err) {
|
|
showCodeWarn(err.message)
|
|
return
|
|
}
|
|
}
|
|
txtJs.value = js
|
|
}
|
|
|
|
txtUrls.onchange = async function() {
|
|
const urls = this.value.split(/\s+/).filter(Boolean)
|
|
const err = await verifyUrls(urls)
|
|
|
|
showUrlsWarn(err)
|
|
if (err) {
|
|
return
|
|
}
|
|
if (urls.length === 0) {
|
|
txtJs.value = ''
|
|
return
|
|
}
|
|
imgUrls = urls
|
|
|
|
txtJs.classList.remove('fold')
|
|
optPrivacy.disabled = false
|
|
chkMinify.disabled = false
|
|
await genCode()
|
|
}
|
|
|
|
optPrivacy.onchange = function() {
|
|
genCode()
|
|
}
|
|
|
|
chkMinify.onchange = function() {
|
|
genCode()
|
|
}
|
|
|
|
|
|
const MAX_BUNDLE_SIZE = 1024 * 1024 * 20
|
|
let dataMap = {}
|
|
let confMap = {}
|
|
let totalSize = 0
|
|
|
|
async function addFile(file, path) {
|
|
if (checkIgnore(path)) {
|
|
return
|
|
}
|
|
if (totalSize + file.size > MAX_BUNDLE_SIZE) {
|
|
return
|
|
}
|
|
totalSize += file.size
|
|
|
|
const data = await readFileData(file)
|
|
dataMap[path] = data
|
|
confMap[path] = {
|
|
'content-type': file.type || 'application/octet-stream',
|
|
'content-length': file.size,
|
|
}
|
|
}
|
|
|
|
let isReading = false
|
|
let ignoreReg
|
|
|
|
function checkIgnore(path) {
|
|
for (const s of path.split('/')) {
|
|
if (ignoreReg.test(s)) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
txtIgnore.onchange = function() {
|
|
ignoreReg = parseRegExp(this.value || '^$')
|
|
if (!ignoreReg) {
|
|
this.classList.add('bad')
|
|
return
|
|
}
|
|
this.classList.remove('bad')
|
|
}
|
|
txtIgnore.onchange()
|
|
|
|
|
|
function startReading() {
|
|
isReading = true
|
|
totalSize = 0
|
|
dataMap = {}
|
|
confMap = {}
|
|
}
|
|
|
|
async function fileDialogHandler() {
|
|
if (isReading) {
|
|
return
|
|
}
|
|
if (this.files.length === 0) {
|
|
return
|
|
}
|
|
startReading()
|
|
|
|
for (const file of this.files) {
|
|
const path = stripRootDir(file.webkitRelativePath)
|
|
await addFile(file, path)
|
|
}
|
|
showConfUI()
|
|
isReading = false
|
|
}
|
|
|
|
divDropZone.onclick = function() {
|
|
const fileDialog = document.createElement('input')
|
|
fileDialog.type = 'file'
|
|
fileDialog.webkitdirectory = true
|
|
fileDialog.onchange = fileDialogHandler
|
|
fileDialog.click()
|
|
}
|
|
|
|
divDropZone.ondragover = function(e) {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
e.dataTransfer.dropEffect = 'copy'
|
|
}
|
|
|
|
divDropZone.ondrop = async function(e) {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
|
|
if (isReading) {
|
|
return
|
|
}
|
|
const {items} = e.dataTransfer
|
|
if (items.length !== 1) {
|
|
return
|
|
}
|
|
const entry = items[0].webkitGetAsEntry()
|
|
if (!entry.isDirectory) {
|
|
return
|
|
}
|
|
startReading()
|
|
|
|
await traverseDir(entry)
|
|
showConfUI()
|
|
isReading = false
|
|
}
|
|
|
|
async function traverseDir(entry) {
|
|
const entires = await getDirEntries(entry)
|
|
|
|
for (const entry of entires) {
|
|
if (entry.isDirectory) {
|
|
await traverseDir(entry)
|
|
} else {
|
|
const file = await entryToFile(entry)
|
|
const path = stripRootDir(entry.fullPath)
|
|
await addFile(file, path)
|
|
}
|
|
}
|
|
}
|
|
|
|
function stripRootDir(path) {
|
|
return path.replace(/^\/?[^/]+\//, '')
|
|
}
|
|
|
|
function getDirEntries(entry) {
|
|
return new Promise((resolve, reject) => {
|
|
entry.createReader().readEntries(entries => {
|
|
resolve(entries)
|
|
}, err => {
|
|
reject(err)
|
|
})
|
|
})
|
|
}
|
|
|
|
function entryToFile(entry) {
|
|
return new Promise((resolve, reject) => {
|
|
entry.file(ret => {
|
|
resolve(ret)
|
|
}, err => {
|
|
reject(err)
|
|
})
|
|
})
|
|
}
|
|
|
|
function readFileData(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
|
|
reader.onload = () => {
|
|
const u8 = new Uint8Array(reader.result)
|
|
resolve(u8)
|
|
}
|
|
reader.onerror = () => {
|
|
reject()
|
|
}
|
|
reader.readAsArrayBuffer(file)
|
|
})
|
|
} |