Affinity Designer: how to cut an image into jigsaw pieces?

[beemerbiker]

I've downloaded an SVG vector template of jigsaw pieces from https://puzzle.telegnom.org/ and I've inserted it as a layer in Affinity Designer. The image I wish to cut up into a set of PNGs (one PNG for each jigsaw piece) is in another layer. I imagined it might be trivial process to somehow mask the piece-cut pattern onto the image to produce an array of piece by piece images, but I can't for the life of me see how to to do it.
Any help or advice much appreciated.

 

[hankscorpio]

Can you give a bit more information on the final out come here?

Are you looking to have it look like a jigsaw? Or are you creating a jigsaw for production that will be cut out?

What is your end goal here so we can best advise how to make it happen.

 

[beemerbiker]

Hi,

I just want the jigsaw pieces (PNG images) to use in a JavaScript script in a web page, so the user can move and rotate the jumbled pieces in order to complete the jigsaw. There is no intention to create a physical jigsaw, nor to create simply the appearance of a completed jigsaw. In effect, I hoped to use the SVG of the jigsaw pattern to “cookie cut” an image in Affinity Designer, producing a whole array of separate PNG images.

 

[hankscorpio]

So you just want to be able to break each piece apart with the image inside it.

First of all, are all the pieces separate in the downloaded file?

Sorry haven't downloaded it.

Should be simple as creating a clipping mask.

 

[hankscorpio]

Well they aren't indvidual shapes - they are only lines drawn on the page



In illustrator you'd use the Pathfinder tool to make them all Shapes - I used Divide





Then choose Ungroup All




Change the stroke thickness and colour back to 0.5pt and Black




Now all the pieces are individual




Placce your image on the Artboard
Then drag it into the Swatches




Select all the Pieces and apply the Pattern Swatch




Then you can collect to export as Individual obects

 

[hankscorpio]

Then export to SVG



My example file is linked here

Dropbox

www.dropbox.com