Drag in, then resize?

General
1

Hello,
In the next step of my learning process, I would like to learn how to drag an image into my app, resize it a few times (create 3 different smaller sizes), and then save it to my computer.

Could someone advise me of the steps required, and what I need to look at in the language reference.
Here is what I have so far:

  1. I am presuming I should have a Canvas, into which I can drag and drop a 1024 x 1024 image onto. Is the Canvas better than the image well for this purpose?

  2. I need to resize the 1024 x 1024 image to 512 x 512. (without plugins of any kind)

  3. I am guessing I need to store the newly resized 512 x 512 image somewhere, whilst I resize the 1024 x 1024 image once again to 256 x 256?

Do these steps look logical (have I missed any intermediary steps out)?

Any tips would be much appreciated.
Thank you all in advance.

2

That looks correct. You resize an image with DrawPicture. You save it to disk with Picture.Save. You may also need to review FolderItem and the related functions, depending on how comfortable you are with dealing with files on disk.

In the cavas (I’ve never used an imagewell in 8 years of coding Xojo/RS/RB), you call AcceptFileDrop and pass it the FileTypeSet you’ve defined for your image types.

I’m not sure if I missed anything.

3

Here is an older example of me.
Maybe you can use some code from it.

ScalePix

4

Tim,
I started a new empty project, dragged a Canvas onto the window, and then in the Canvas1.Open event, I put the following code:

me.AcceptPictureDrop me.AcceptFileDrop("image/jpeg") me.AcceptFileDrop("image/png")

In the DropObject event I have the following code:

If obj.PictureAvailable Then Me.Backdrop = obj.Picture End If

When run, nothing happens at all and the jpg I dropped onto the canvas does not appear as the background?

I have already created the fileType set including jpg and png.
Is there something else I need to do in this first step?

5

Thanks Axel.
That was bit too advanced for me at the moment, but I am sure once I get a bit further in this particular learning process - it will start to make more sense :slight_smile:

Thank you.

6

PictureAvailable is only applicable if you’re dragging a picture object from somewhere else in your project. You’re dragging a File, not a Picture, so you have to test for obj.FolderItemAvailable.

  If obj.PictureAvailable Then
    Me.Backdrop = obj.Picture
  elseif obj.FolderItemAvailable then
    me.Backdrop = Picture.open(obj.FolderItem)
  End If
7

Richard, would you be, by any chance, making a developer tool for resizing icons for the Mac App Store? :slight_smile:

8

Ok - first step completed - I can now drop an image onto the canvas :slight_smile:
So, to ensure I have learnt this (which is my objective) - the first line allows a picture from another app, or elsewhere in my app, and the third line allows image files from elsewhere on the computer.

Hopefully I have understood correctly so far.

My next logical question is:

  1. If my Canvas is 256 x 256, what do I look at in the Language Reference, in order to resize the image, to match the size of the canvas - is it still DrawPicture as you advised a moment ago?
9

Not for the Mac App store - no.
Mainly to learn something new in Xojo, and if I can manage it - to include as part of a freebie app for novices :slight_smile:

10

[quote=102777:@Richard Summers]Not for the Mac App store - no.
Mainly to learn something new in Xojo, and if I can manage it - to include as part of a freebie app for novices :)[/quote]
Good job, sir.

11

Yes, and if you look at the parameters that DrawPicture takes, you should see the ones you need.

12

Thanks.
Surely it can’t be as simple as putting the following code into the Canvas1 Paint event?:

g.DrawPicture(myImage,0,0,256,256)

If it is that simple - how do I bind a Variable name to the obj.FolderItem??
I have tried the following code (in desperation), but I got an error - Item Does Not Exist:

g.DrawPicture(obj.FolderItem,0,0,256,256)
13

No, not that simple, but pretty close. The parameters to DrawPicture break down to

DrawPicture theImage, X1, Y1, W1, H1, X2, Y2, W2, H2

theImage, X1, Y1 = draw the image here
X1, Y1, W1, H1 = Rectangle1 = the area of the target to draw into
X2, Y2, W2, H2 = Rectangle2 = the portion of the image to draw

Rectangle1 relates to the image you’re drawing to
Rectangle2 relates to the image you’re drawing from

If Rectangle1 is smaller than Rectangle2, you’re reducing the image.
If Rectangle1 is larger than Rectangle2, you’re enlarging the image.

14

I need to think about this dilemma, before I try to learn this next step:

Would it be easier to drop a 1024 x 1024 image onto a single Canvas, and then have it make all of the smaller sizes at the same time (512 x 512, 256 x 256, 128 x 128 etc. etc.), and then somehow save all the smaller images to a location.

Or:

Create half a dozen smaller Canvas’s and resize the image to the size of each Canvas, and then save the separate images to a location?

I would rather just drop the image onto 1 canvas, and then create all the various resized images at the same time.
What would you as professional developers recommend (considering that I have a small peanut brain) :slight_smile:

15

One canvas, create all the images at one time.

16

That’s what I wanted to hear :slight_smile:

I understand the explanation you gave regarding the quote below - thank you.

17

Richard this should get you going off to the races.

https://www.dropbox.com/s/v72wlg8r68yyzjo/RichardTest.xojo_binary_project

18

[quote=102796:@Richard Summers]I need to think about this dilemma, before I try to learn this next step:

Would it be easier to drop a 1024 x 1024 image onto a single Canvas, and then have it make all of the smaller sizes at the same time (512 x 512, 256 x 256, 128 x 128 etc. etc.), and then somehow save all the smaller images to a location.

Or:

Create half a dozen smaller Canvas’s and resize the image to the size of each Canvas, and then save the separate images to a location?

I would rather just drop the image onto 1 canvas, and then create all the various resized images at the same time.
What would you as professional developers recommend (considering that I have a small peanut brain) :)[/quote]

In a nutshell:

  1. Create a Pictureclass with properties such as Left(int), Top(int),Width(int),Height(int),ResizedWidth(int),ResizedHeight(int),isSelected(boolean), Image(picture), etc.

  2. Append it to the PictureClassArray()

  3. Use the Canvas Paint event to for/next through the PictureClassArray to draw all objects.

  4. Signal a “resize” of resizedheight/resizedwidth to use drawpicture to resize.

19

Hi Richard, some of the things you are doing with this project are covered at .

20

The link should be: xojobyexample.com