how to loadImage() from createImg()-p5.dom or from base64

MarcoHeleno

Hi! I need some help with:

loadImage() from createImg()-p5.dom

or

loadImage() from a data URI, such as "data:image/jpg;base64,{base 64 encoded data block}"

The createImg() comes from an createFileInput(), and I want o be able to resize() that image.

Thanks for your help!

Code below:

function setup() {
    createFileInput (handleFile);
    createCanvas (800, 400);
    background (245);
}

function draw() {
    strokeWeight (10);
    stroke (0, 255,0);
    line (pmouseX, pmouseY, mouseX, mouseY);
}

function handleFile (file) {
  if (file.type === 'image') {
    var img = createImg (file.data).hide();
    print (img);

    //img.resize (width, 0);
    image (img, 0, 0);
  }
}

GoToLoop

• Function createImg(): https://p5js.org/reference/#/p5/createImg
• Creates a p5.Element object: https://p5js.org/reference/#/p5.Element
• However, there's no method called resize() like a p5.Image datatype object:

1. https://p5js.org/reference/#/p5.Image
2. https://p5js.org/reference/#/p5.Image/resize

• Instead, the corresponding method is named just size():
  https://p5js.org/reference/#/p5.Element/size

GoToLoop

Another approach is to replace createImg() w/ loadImage(): *-:)
http://p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest

kfrajer

@GoToLoop Can you explain what evt.preventDefault(); does in your post?

I can see this in the reference: https://p5js.org/reference/#/p5/mouseReleased

Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method.

Kf

GoToLoop

https://Developer.Mozilla.org/en-US/docs/Web/API/Event/preventDefault

... add return false; to the end of the method.

That trick only works for the global events. :ar!
For p5.Element's, an explicit call to preventDefault() is needed. L-)

kfrajer

@GoToLoop Thxs.

Kf

MarcoHeleno

@GoToLoop Thanks!