Image Slice Tool – Output Canvas Resolution Issue

p5.js Coding Questions
1

Hi everyone,
I am quite new to p5js world and I am trying to create an Image slicing tool.

The code gets me the wanted result – sliced input image
but it seems that it doesn’t retain the intial resolution of the image,
the output resolution of final saved sliced canvas is really low.

You can test the tool here http://pritomnost.matejvojtus.com/
or see it in action here https://www.instagram.com/p/B-cGNwWBupC/

let input;
let pix;
let img;
let obr;
let x1, x2, y1, y2;
let w, h, m;
let a = 0;
let sr = 40;

function setup() {
  let c = createCanvas(window.innerWidth, window.innerHeight);
  textAlign(CENTER);
  textSize(16);
  text('PRITOMNOST IMAGE TOOL 1.6', width / 2, height / 2-48);
  text('DRAG AND DROP AN IMAGE', width / 2, height / 2);
  text('MOVE CURSOR AROUND TO CHANGE IMAGE PLACEMENT', width / 2, height / 2+20);
  text('PRESS AND HOLD MOUSE TO STOP', width / 2, height / 2+40);
  text('SAVE TO DESKTOP BY PRESSING S', width / 2, height / 2+60);
  c.drop(gotFile);
  
}

function gotFile(file) {
  img = createImg(file.data, created).hide();
  clear(); //clears drop image screen
}

function created() {
  graphics = createGraphics(img.width, img.height);
  graphics.image(img, 0, 0, graphics.width, graphics.height);
  let pix = graphics.get(0, 0, graphics.width, graphics.height);
  obr = pix;
  obr.loadPixels(draw);
}

function draw() {
  if (obr){
  obr.resize(0, window.innerHeight);
    //image(obr, 0, 0);
  a = a + sr;
  if (a > windowWidth) {
    a = 0;
  }
  m = m + 10;
  if (m > height / 4) {
    m = 0;
  }
  m = int(m);
  copy(obr, x1, y1, w, h, a, y2, w, h);
  x1 = m+mouseY;
  y1 = 0;
  y2 = 0;
  w = sr;
  h = height;
  }
}

function keyTyped() {
  if (key === 's') {
    noLoop();
    saveCanvas('myCanvas.jpg');
  }
}
function mousePressed() {
noLoop();  // Holding down the mouse activates looping
}
function mouseReleased() {
loop();  // Releasing the mouse stops looping draw()
}

I really appreciate any help! Thank you in advance.

1 Like
2

Welcome to the forums! Neat sketch.

saveCanvas() is taking a “screenshot” of the canvas. If you initialized the sketch with size 1000x1000, but you pass it a 3000x4000 image, saveCanvas() is still going to give you back a 1000x1000 “screenshot”.

But How do I preserve the initial resolution?

Instead of drawing directly to the main sketch’s canvas, you could do all your changes, in full resolution, to a PGraphic, and then draw it to the main. Finally, when the user presses save, call myFullResolutionGraphic.saveCanvas() instead of just saveCanvas()

1 Like