How do I size an image with the ImageObject (or without)?



  • It's easy to draw an image into a page. However, I'm having trouble sizing it.

    This does nothing:

    im = ImageObject()
    
    with im:
    
        open("/Users/stephennixon/Downloads/stills/IMG_0769-still-0018.jpg")
        size(200, 200)
    
    image(im, (10, 50))
    

    Am I missing something?



  • To add a bit more detail, if I copy the suggested code from the imageObject page but add a path for the optional path arg, I get an error message.

    Error:

    Traceback (most recent call last):
      File "<untitled>", line 10, in <module>
      File "drawBot/drawBotDrawingTools.pyc", line 265, in size
    drawBot.misc.DrawBotError: Can't use 'size()' after drawing has begun. Try to move it to the top of your script.
    

    Code:

    size(550, 300)
    # initiate a new image object
    im = ImageObject("/Users/stephennixon/Downloads/stills/IMG_0769-still-0018.jpg")
    
    # draw in the image
    # the 'with' statement will create a custom context
    # only drawing in the image object
    with im:
        # set a size for the image
        size(200, 200)
        # draw something
        fill(1, 0, 0)
        rect(0, 0, width(), height())
        fill(1)
        fontSize(30)
        text("Hello World", (10, 10))
    
    # draw in the image in the main context
    image(im, (10, 50))
    # apply some filters
    im.gaussianBlur()
    
    # get the offset (with a blur this will be negative)
    x, y = im.offset()
    # draw in the image in the main context
    image(im, (300+x, 50+y))
    

    Just to confirm that I am using the correct path, it works fine to use the following code (I just wish I could figure out how to adjust the size).

    image("/Users/stephennixon/Downloads/stills/IMG_0769-still-0018.jpg", (10, 50))
    

    Thanks so much for any insights!



  • I may have found a solution to this, but I'm wondering if there's something more direct.

    For now, I'm using imageObject.size() to find the image size and set the scale based on my layout:

    sizingImage = ImageObject(path="img01.jpg")
    imageScale = W/sizingImage.size()[0] / cols
    

    ...then later, using a savedState() to apply that scaling inside of a bigger loop:

    with savedState():
        scale(imageScale)            
        image(im, (x* (1/imageScale),y* (1/imageScale)))
    

    If there is (now or in the future) a way to size an image similar to a rect(), I would be really excited to learn about it, as it would be quite a bit more direct to use for layouts. Thanks!



  • hi @ThunderNixon,

    placing images is a job for image(); imageObject() is for creating or modifying raster images inside DrawBot.

    to draw an image at a given size:

    1. get the width and height of the image
    2. define the intended width and height
    3. calculate the X and Y scaling factors
    4. apply the scaling factors & draw the image

    in code:

    imgPath = 'someFolder/myImage.png'
    
    # 1
    srcWidth, srcHeight = imageSize(imgPath)
    
    # 2
    dstWidth, dstHeight = 500, 800
    
    # 3
    factorWidth  = dstWidth  / srcWidth
    factorHeight = dstHeight / srcHeight
    
    # 4
    with savedState():
        scale(factorWidth, factorHeight)
        image(imgPath, (0, 0))
    

    cheers!



  • Ahh this is a very clear-headed approach. Thanks for showing me how it's done! This is very helpful.