Manipulate Images With Drag and Drop in Script Kit
We all have various tasks we need to accomplish with images. Whether it's resizing, optimizing, organizing, uploading, or anything else. Script Kit provides a drop component so you can simply drag and drop images into a script and process them in whatever way matches your workflow.
// Name: Drop Image
import "@johnlindquist/kit"
let files = await drop()
let imagePath = files[0].path
let Jimp = await npm("jimp")
let image = await Jimp.read(imagePath)
let newImagePath = path.resolve(
path.dirname(imagePath),
`new-${path.basename(imagePath)}`
)
await image
.resize(parseInt(await arg("Width:"), 10), 100)
.write(newImagePath)
Instructor: [0:00] I have an image that I just want to drop on to a script and process the image. Let's create a script called drop_image, hit Enter, our editor will open. As soon as we type await drop, you'll see when I run this script again, drop_image, that this turns into a drop area. I can drag and drop things on to it.
[0:21] Now, drop gives us back an array of files that we dropped onto it. If we inspect these really quickly, we run dev on the files we drop on -- I'll run drop_image -- drag and drop the image, and our devtools open up. It's an array of one, that has this information on it.
[0:41] The most important thing for us is the path, because once we have the path in our script, we'll just call this Image Path and assign it to the firstItem.path. We can bring in npm libraries like jimp, which will allow us to manipulate the image.
[1:00] With jimp, the API is, await jimp read, and then we can pass in our Image Path. This gives us back an image which we can act on. Now, the action we're going to take on our image is to Image Resize. Let's resize it to 100 by 100 and then write it out to a new path.
[1:25] Let's create that path. We'll call it New Image Path. We'll use some standard node path tools to path resolve, take the path dirname of Image Path. This will create a string of the parent directory. Then, we'll just call this new-path.facename of Image Path, which is the name of the actual file.
[1:51] We're resolving a path with the parent directory, and new-, and we'll pass that into New Image Path. With all that being done, we'll come over here, run our drop_image, drop the image on there, and now we have a new-candy which is 100 by 100.
[2:12] You could push the script in many different ways. For example, jimp has a lot of different ways to manipulate images, or you could simply do something like drop in an arg, await arg. This would be the width, and we'll just have to turn that string into a number. Wrap that, make it base10. Then, the next time that we run our script and drop an image on there, it'll ask us to specify the width.
[2:37] We'll say, 200, hit Enter. Now our new-candy is 200 by 100, because we just extracted a value here and replaced it with an arg.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!