Question 161553 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Javascript shape images in canvas like Photoshop?

example image
is there any way i can draw an image on canvas like this? as you can see, the image on the shirt looks like 3d shape.how it curved.

I’ve tried seach anything might be possible to help online, but i found nothing.
What I’m trying to do is that read photoshop file,and then read all the data and infomations of transofrm,and position,size,etc. and then export as an svg file with custom attributes which i’ve got from psd file. and then load svg file with fabric to canvas. I now can perfectly draw everything on canvas, for example size, position, and even rotation, skew, but just not transfomation.

Tags:

2

Answers


  1. 0

    You could approach it like this:

    1. Create a 256×256 image with a gradient on both axes: the red channel goes from 0 to 255 on the x axis, the green channel goes from 0 to 255 on the y axis.
    2. Distort this in Photoshop however you like so that it fits the shirt. You can use transparency where you want the background (shirt, person) to appear. Export the resulting image from Photoshop to PNG.
    3. In the web app, loop through the pixels of this distorted image. For non-transparent pixels, convert the red and green channels back to x and y, and look up the colour from the undistorted image. Use this colour in the output image. For transparent pixels, just use the background photo.
    Login or Signup to reply.
  2. 0

    Ignore 3d. You should be able to use Transform (Distort and Warp) to manipulate the square image so it resembles the one in the bottom right hand corner. (Uses transparency at 50% so you can match it)

    Get the transform code from the Scriptlistener to reuse again.

    It’ll start with "Trnf"

    // =======================================================
var idTrnf = charIDToTypeID( "Trnf" );
var desc4416 = new ActionDescriptor();
var idnull = charIDToTypeID( "null" );
var ref731 = new ActionReference()
....
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search