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

MarcoHeleno · December 2017

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 · December 2017

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:

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

GoToLoop · December 2017

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

kfrajer · December 2017

@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