如何像这样倾斜图像

Question

I want to skew an image like this what params I need to set for context.setTransform?

Answer 1

You cannot achieve this with a single 2D transform.

A 2D transform allows you to skew the image "upwards" or "downwards" by passing the tangent of the skew angle in the second argument to setTransform() , but you want to perform both in a symmetrical manner (resulting in a "nearwards" and/or "farwards" deformation). You need a 3D transform to do that.

However, you can emulate the same result by slicing the image into several horizontal "bands" and applying a different transform when rendering each band. Bands further from the half of the image will be applied stronger skew angles. Something like:

var width = image.width,
    height = image.height,
    context = $("canvas")[0].getContext("2d");
for (var i = 0; i <= height / 2; ++i) {
    context.setTransform(1, -0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 - i, width, 2,
        0, height / 2 - i, width, 2);
    context.setTransform(1, 0.4 * i / height, 0, 1, 0, 60);
    context.drawImage(image,
        0, height / 2 + i, width, 2,
        0, height / 2 + i, width, 2);
}

Note the bands are two pixels high instead of one to avoid a moire effect.

You can see the results in this fiddle .

Answer 2

Here's a function I wrote when I was playing with rendering pseudo-3d perspective with JS.

Unlike the stripe-based transformation functions (which, admittedly, are perfectly good enough for most standard use cases) this function uses a matrix of 4 corners to define a custom quadrilateral that the original rectangle should be transformed to. This adds some flexibility and can be used to render custom trapezoids for both "painting-on-the-wall" horizontal perspective and "carpet-on-the-floor" vertical perspective (as well as asymetrical quadrilaterals for even more 3d-like feel).

function drawImageInPerspective(
        srcImg,
        targetCanvas,
        //Define where on the canvas the image should be drawn:  
        //coordinates of the 4 corners of the quadrilateral that the original rectangular image will be transformed onto:
        topLeftX, topLeftY,
        bottomLeftX, bottomLeftY,
        topRightX, topRightY,
        bottomRightX, bottomRightY,
        //optionally flip the original image horizontally or vertically *before* transforming the original rectangular image to the custom quadrilateral:
        flipHorizontally,
        flipVertically
    ) {

    var srcWidth=srcImg.naturalWidth;
    var srcHeight=srcImg.naturalHeight;

    var targetMarginX=Math.min(topLeftX, bottomLeftX, topRightX, bottomRightX);
    var targetMarginY=Math.min(topLeftY, bottomLeftY, topRightY, bottomRightY);

    var targetTopWidth=(topRightX-topLeftX);
    var targetTopOffset=topLeftX-targetMarginX;
    var targetBottomWidth=(bottomRightX-bottomLeftX);
    var targetBottomOffset=bottomLeftX-targetMarginX;

    var targetLeftHeight=(bottomLeftY-topLeftY);
    var targetLeftOffset=topLeftY-targetMarginY;
    var targetRightHeight=(bottomRightY-topRightY);
    var targetRightOffset=topRightY-targetMarginY;

    var tmpWidth=Math.max(targetTopWidth+targetTopOffset, targetBottomWidth+targetBottomOffset);
    var tmpHeight=Math.max(targetLeftHeight+targetLeftOffset, targetRightHeight+targetRightOffset);

    var tmpCanvas=document.createElement('canvas');
    tmpCanvas.width=tmpWidth;
    tmpCanvas.height=tmpHeight;
    var tmpContext = tmpCanvas.getContext('2d');

    tmpContext.translate(
        flipHorizontally ? tmpWidth : 0,
        flipVertically ? tmpHeight : 0
    );
     tmpContext.scale(
        (flipHorizontally ? -1 : 1)*(tmpWidth/srcWidth),
        (flipVertically? -1 : 1)*(tmpHeight/srcHeight)
    );

    tmpContext.drawImage(srcImg, 0, 0);  

    var tmpMap=tmpContext.getImageData(0,0,tmpWidth,tmpHeight);
    var tmpImgData=tmpMap.data;

    var targetContext=targetCanvas.getContext('2d');
    var targetMap = targetContext.getImageData(targetMarginX,targetMarginY,tmpWidth,tmpHeight);
    var targetImgData = targetMap.data;

    var tmpX,tmpY,
        targetX,targetY,
        tmpPoint, targetPoint;

    for(var tmpY = 0; tmpY < tmpHeight; tmpY++) {
        for(var tmpX = 0;  tmpX < tmpWidth; tmpX++) {

            //Index in the context.getImageData(...).data array.
            //This array is a one-dimensional array which reserves 4 values for each pixel [red,green,blue,alpha) stores all points in a single dimension, pixel after pixel, row after row:
            tmpPoint=(tmpY*tmpWidth+tmpX)*4;

            //calculate the coordinates of the point on the skewed image.
            //
            //Take the X coordinate of the original point and translate it onto target (skewed) coordinate:
            //Calculate how big a % of srcWidth (unskewed x) tmpX is, then get the average this % of (skewed) targetTopWidth and targetBottomWidth, weighting the two using the point's Y coordinate, and taking the skewed offset into consideration (how far topLeft and bottomLeft of the transformation trapezium are from 0).   
            targetX=(
                       targetTopOffset
                       +targetTopWidth * tmpX/tmpWidth
                   )
                   * (1- tmpY/tmpHeight)
                   + (
                       targetBottomOffset
                       +targetBottomWidth * tmpX/tmpWidth
                   )
                   * (tmpY/tmpHeight)
            ;
            targetX=Math.round(targetX);

            //Take the Y coordinate of the original point and translate it onto target (skewed) coordinate:
            targetY=(
                       targetLeftOffset
                       +targetLeftHeight * tmpY/tmpHeight
                   )
                   * (1-tmpX/tmpWidth)
                   + (
                       targetRightOffset
                       +targetRightHeight * tmpY/tmpHeight
                   )
                   * (tmpX/tmpWidth)
            ;
            targetY=Math.round(targetY);

            targetPoint=(targetY*tmpWidth+targetX)*4;

            targetImgData[targetPoint]=tmpImgData[tmpPoint];  //red
            targetImgData[targetPoint+1]=tmpImgData[tmpPoint+1]; //green
            targetImgData[targetPoint+2]=tmpImgData[tmpPoint+2]; //blue
            targetImgData[targetPoint+3]=tmpImgData[tmpPoint+3]; //alpha
        }
    }

    targetContext.putImageData(targetMap,targetMarginX,targetMarginY);
}

Here's how to call it:

function onLoad() {
    var canvas = document.createElement("canvas");
    canvas.id = 'canvas';
    canvas.width=800;
    canvas.height=800;
    document.body.appendChild(canvas);

    var img = new Image();
    img.onload = function(){ 
        //draw the original rectangular image as a 300x300 quadrilateral with its bottom-left and top-right corners skewed a bit:
        drawImageInPerspective(
         img, canvas,
         //coordinates of the 4 corners of the quadrilateral that the original rectangular image will be transformed onto:
         0, 0, //top left corner: x, y
         50, 300, //bottom left corner: x, y - position it 50px more to the right than the top right corner
         300, 50, //top right corner: x, y - position it 50px below the top left corner 
         300, 300, //bottom right corner: x,y
         false, //don't flip the original image horizontally
         false //don't flip the original image vertically
        );
    }
    img.src="img/rectangle.png";
}

Despite all the per-pixel calculations it is actually quite efficient, and it gets the job done:

transformed image

...but there may be more elegant ways to do it.

Answer 3

There is a method of transforming a rectangle to a trapezium see this stack overflow answer . However you would need to use this on each pixel.

You could also slice the image into vertical strips 1 pixel wide and then stretch each strip from its centre.

Suppose this leads to w strips and you want the left hand edge of the trapezium to be 80% of the right hand edge then

for strip n the stretch whould be 1+n/(4w)

Answer 4

That's still only for the future, but it's so cool that I can't refrain from adding it already.

Chrome team is working on adding non-affine transforms to the 2D API .
This would add a few methods to the 2D API such as perspective() , rotate3d() , rotateAxis() , and extend others to add a z-axis, as well as improve setTransform() and transform() into finally accepting a 3D DOMMatrix.

This is still very experimental and may still change, but you can already try this in Chrome Canary with chrome://flags/#enable-experimental-web-platform-features switched on.

 if( CanvasRenderingContext2D.prototype.rotate3d ) { onload = (evt) => { const img = document.getElementById("img"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.translate(0, canvas.height/2); ctx.perspective(705); // yeah, magic numbers... ctx.rotate3d(0, (Math.PI/180) * 321, 0); // and more ctx.translate(0, -canvas.height/2); const ratio = img.naturalHeight / canvas.height; ctx.drawImage(img, 0, canvas.height/2 - img.naturalHeight/2); }; }else { console.error( "Your browser doesn't support affine transforms yet" ); }

 body { margin: 0 } canvas, img { max-height: 100vh; }

 <canvas id="canvas" width="330" height="426"></canvas> <img id="img" src="https://upload.wikimedia.org/wikipedia/en/f/f8/Only_By_the_Night_%28Kings_of_Leon_album_-_cover_art%29.jpg">

Which in current Chrome Canary renders as

Answer 5

The question has been answered a long time ago but I would like to add one idea to @Frédéric.

If we also need a perspective illusion, we just have to multiply it's width while drawing by the skew() angle cosinus, since we have the angle and we have the hypotenuse.

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var alpha = 0; var angle; var opening = false; window.addEventListener('mousedown', openDoor); function openDoor() { opening = true; } var image = new Image(); var image2 = new Image(); image2.src = "https://i.ibb.co/7b19d5m/road-jpeg.png"; image.onload = function () { var width = image.width; var height = image.height; function animate() { if (opening && alpha < 60) alpha += 1; ctx.clearRect(0, 0, 400, 400); ctx.fillStyle = "black"; ctx.fillRect(0,0,400,400); ctx.drawImage(image2,20, 60); angle = (alpha * Math.PI) / 180; ctx.save(); for (var i = 0; i <= height / 2; ++i) { ctx.setTransform(1, (angle * i) / height, 0, 1, 20, 60); ctx.drawImage( image, 0, height / 2 - i, width, 2, 0, height / 2 - i, width * Math.cos(angle), 2 ); ctx.setTransform(1, (-angle * i) / height, 0, 1, 20, 60); ctx.drawImage( image, 0, height / 2 + i, width, 2, 0, height / 2 + i, width * Math.cos(angle), 2 ); } ctx.restore(); requestAnimationFrame(animate); } animate(); }; image.src = 'https://i.ibb.co/thZfnYh/door-jpg.png';

 <canvas id="canvas" width="200" height="300"> </canvas> <h3>Click on the door to open it</h3>