exportWidth
and exportHeight
proportionsfoo__[40%,37%].jpg
(regular) or bar__[40%,37%,P].jpg
(panorama)resizeAndCrop
from the slave croppers' crop boxes, and resize
from the hidden non-cropper inclusions/Users/NAME/Library/Application Support/focalpoint-multi-cropper/user-preferences.json
)npm install
# run with devtools closed
npm run start
# run with devtools open
npm run start:debug
npm run serve
open http://127.0.0.1:8000
npm run lint
Cypress does not have full support for Electron, so tests are run in-browser and test only non-Electron functionality.
npm run test
// inspect the current state of fmcCroppersUi
document.getElementById('croppers').fmcCroppersUi
I needed a tool to art-direct thousands of images for my bicycle touring blog.
Previously I've used WordPress with Imgix. I'm now moving away from subscription-based systems.
I will use this app to generate image URLs for the next version of my blog which runs on Vuepress.
My Vuepress app uses the following image sizes:
imagesSizes: {
type: Object,
default: () => ({
collapsed: {
width: 865,
height: 368
},
expanded: {
width: 865,
},
panorama: {
height: 368
},
thumbnail: {
width: 320,
height: 320
},
})
},
Excluding anything that requires a subscription fee or complex serverside setup.
cropBoxResizable
optionImages need to be loaded into the cropping tool. As this is best done locally to remove dependency on web-based subscription services, the app needs to be able to interact with the local file system.
The combination of input[type="file"]
and JavaScript's FileReader object only provides access to a single file.
To provide a visual overview, the cropper needs access to a folder of files.
A web browser is sandboxed for security reasons. Electron can run a web browser whilst also providing access to the operating system.