Skip to content

Instantly share code, notes, and snippets.

@josephj

josephj/index.html

Last active July 7, 2020 00:15
Show Gist options
  • Save josephj/441b77217f8759e81586d93ff41e06ae to your computer and use it in GitHub Desktop.
Save josephj/441b77217f8759e81586d93ff41e06ae to your computer and use it in GitHub Desktop.
Download ZIP
Electron show the images by their EXIF thumbnails
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Thumbnails</title>
</head>
<body>
<div>
<h2>Original</h2>
<img width="100" height="72" id="original" />
</div>
<div>
<h2>EXIF Thumbnails</h2>
<img width="100" height="72" id="img" />
</div>
<script>
var appendBuffer = function (buffer1, buffer2) {
var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength)
tmp.set(new Uint8Array(buffer1), 0)
tmp.set(new Uint8Array(buffer2), buffer1.byteLength)
return tmp
}
const photoUrl =
'file:///Users/josephj/Downloads/Sample Photos/Sample photos/FAM_001.JPG'
const img = new Image()
img.onload = () => {
console.log('onload', new Date().getTime())
}
img.src = photoUrl
document.getElementById('original').src = photoUrl
fetch(photoUrl)
.then((response) => {
const reader = response.body.getReader() // chunk
let arr = [],
start,
end,
buffer,
counter = 0
return new ReadableStream({
start(controller) {
return pump()
function pump() {
return reader.read().then(({ done, value }) => {
counter += 1
buffer = buffer
? appendBuffer(buffer, value)
: new Uint8Array(value)
//buffer = value
console.log('counter', counter)
for (var i = 2; i < buffer.length; i++) {
if (buffer[i] == 0xff) {
if (!start) {
if (buffer[i + 1] == 0xd8) {
start = i
console.log('>>>>> start <<<<< ', start, buffer)
}
} else {
if (buffer[i + 1] == 0xd9) {
end = i + 2
console.log('>>>>> end <<<<<', end, buffer)
break
}
}
}
}
if (start && end) {
const stream = buffer.subarray(start, end)
controller.enqueue(stream)
controller.close()
reader.cancel()
return
}
if (done) {
controller.close()
return
}
controller.enqueue(value)
return pump()
})
}
},
})
})
.then((stream) => new Response(stream))
.then((response) => response.blob())
.then((blob) => URL.createObjectURL(blob))
.then((url) => {
console.log('EXIF ready', new Date().getTime())
document.getElementById('img').src = url
})
</script>
</body>
</html>
Raw
main.js
const {app, BrowserWindow} = require('electron')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('index.html')
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment