Permalink
Browse files

automatically resize and crop images before adding

  • Loading branch information...
mmckegg committed Oct 11, 2016
1 parent c25b29b commit d9392ad3315d3b0546992b85520caef6f473c8b0
Showing with 62 additions and 17 deletions.
  1. +13 −9 add-audio-window.js
  2. +2 −2 api/index.js
  3. +11 −5 edit-profile-window.js
  4. +2 −1 index.js
  5. +33 −0 lib/process-image.js
  6. +1 −0 package.json
View
@@ -12,6 +12,7 @@ var createTorrent = require('create-torrent')
var fs = require('fs')
var extend = require('xtend')
var sanitizeFileName = require('sanitize-filename')
var processImage = require('./lib/process-image')
module.exports = function (client, config, edit) {
var context = {
@@ -23,7 +24,7 @@ module.exports = function (client, config, edit) {
var announce = config.webtorrent.announceList
var mediaPath = config.mediaPath
var artworkPath = Value()
var artworkUrl = Value()
var artworkInput = h('input', {type: 'file', accept: 'image/*'})
var audioInput = h('input', {type: 'file', accept: 'audio/*'})
@@ -81,7 +82,12 @@ module.exports = function (client, config, edit) {
artworkInput.onchange = function () {
var file = artworkInput.files[0]
if (file) {
artworkPath.set(file.path)
processImage(file.path, {
width: 500, height: 500, type: 'jpeg'
}, (err, url) => {
if (err) throw err
artworkUrl.set(url)
})
}
}
@@ -110,11 +116,9 @@ module.exports = function (client, config, edit) {
h('section AddAudioPost', [
h('div.artwork', {
style: {
'background-image': computed([artworkPath, defaultImage], (path, defaultImage) => {
if (path) {
return `url('file://${path}')`
} else if (defaultImage) {
return `url('${defaultImage}')`
'background-image': computed([artworkUrl, defaultImage], (url, defaultImage) => {
if (url || defaultImage) {
return `url('${url || defaultImage}')`
} else {
return ''
}
@@ -190,8 +194,8 @@ module.exports = function (client, config, edit) {
function next (err, item) {
if (err) throw err
if (artworkPath()) {
context.api.addBlob(artworkPath(), (err, hash) => {
if (artworkUrl()) {
context.api.addBlob(artworkUrl(), (err, hash) => {
if (err) throw err
console.log('added blob', hash)
item.artworkSrc = `blobstore:${hash}`
View
@@ -129,10 +129,10 @@ module.exports = function (ssbClient, config) {
}, cb)
},
addBlob (path, cb) {
addBlob (dataOrPath, cb) {
var id = `${windowId}-${seq++}`
callbacks[id] = cb
electron.ipcRenderer.send('add-blob', id, path)
electron.ipcRenderer.send('add-blob', id, dataOrPath)
},
getBlobUrl (id) {
View
@@ -3,14 +3,15 @@ var computed = require('@mmckegg/mutant/computed')
var when = require('@mmckegg/mutant/when')
var Value = require('@mmckegg/mutant/value')
var electron = require('electron')
var processImage = require('./lib/process-image')
module.exports = function (client, config, data) {
var context = {
config,
api: require('./api')(client, config)
}
var imagePath = Value()
var imageUrl = Value()
var publishing = Value(false)
var imageInput = h('input', {type: 'file', accept: 'image/*'})
@@ -29,7 +30,12 @@ module.exports = function (client, config, data) {
imageInput.onchange = function () {
var file = imageInput.files[0]
if (file) {
imagePath.set(file.path)
processImage(file.path, {
width: 500, height: 500, type: 'jpeg'
}, (err, url) => {
if (err) throw err
imageUrl.set(url)
})
}
}
@@ -42,7 +48,7 @@ module.exports = function (client, config, data) {
h('section EditProfile', [
h('div.image', {
style: {
'background-image': url(computed(imagePath, p => p ? `file://${p}` : defaultImage))
'background-image': url(computed(imageUrl, p => p || defaultImage))
}
}, [
h('span', ['🖼 Choose Profile Image...']), imageInput
@@ -77,8 +83,8 @@ module.exports = function (client, config, data) {
item.description = description.value
}
if (imagePath()) {
context.api.addBlob(imagePath(), (err, hash) => {
if (imageUrl()) {
context.api.addBlob(imageUrl(), (err, hash) => {
if (err) throw err
console.log('added blob', hash)
item.image = {
View
@@ -15,6 +15,7 @@ var Path = require('path')
var fs = require('fs')
var defaultMenu = require('electron-default-menu')
var Menu = electron.Menu
var dataUriToBuffer = require('data-uri-to-buffer')
var windows = {
dialogs: new Set()
@@ -46,7 +47,7 @@ if (process.argv.includes('--test-peer')) {
electron.ipcMain.on('add-blob', (ev, id, path, cb) => {
pull(
pullFile(path),
path.startsWith('data:') ? pull.values([dataUriToBuffer(path)]) : pullFile(path),
context.sbot.blobs.add((err, hash) => {
if (err) return ev.sender.send('response', id, err)
ev.sender.send('response', id, null, hash)
View
@@ -0,0 +1,33 @@
module.exports = function (path, opts, cb) {
var image = document.createElement('img')
image.onload = next
image.src = `file://${path}`
image.style.display = 'block'
if (image.complete) next()
function next () {
var imageHeight = image.height
var imageWidth = image.width
var multiplier = (opts.height / image.height)
if (multiplier * imageWidth < opts.width) {
multiplier = opts.width / image.width
}
var finalWidth = imageWidth * multiplier
var finalHeight = imageHeight * multiplier
var offsetX = (finalWidth - opts.width) / 2
var offsetY = (finalHeight - opts.height) / 2
var canvas = document.createElement('canvas')
canvas.width = opts.width
canvas.height = opts.height
var ctx = canvas.getContext('2d')
ctx.drawImage(image, -offsetX, -offsetY, finalWidth, finalHeight)
var dataURL = canvas.toDataURL('image/' + opts.type)
cb(null, dataURL)
}
}
View
@@ -40,6 +40,7 @@
"bittorrent-tracker": "^8.0.12",
"color-hash": "^1.0.3",
"create-torrent": "~3.25.1",
"data-uri-to-buffer": "0.0.4",
"electron": "1.4.2",
"electron-default-menu": "^1.0.0",
"graphmitter": "^1.6.3",

0 comments on commit d9392ad

Please sign in to comment.