可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I found images that depict what is my problem:

User will able to choose four points on canvas to crop the part of image and than stretch it.

How to do that in HTML5? drawImage function (as I know) works only with rectangles (takes x, y, width and height values) so I can't use irregular shape. The solution have to work in every modern browser, so I don't want things based on webgl or something.

EDIT: More info: this will be app for editing pictures. I want to let user cut some part of bigger picture and edit that. It will be similar to Paint, so canvas is required to edit pixels.

回答1:

So here's a killing trick : You can use the regular drawImage of the context2d to draw a texture inside a triangle.
The constraint is that the texture coordinates must be axis-aligned.

To draw a textured triangle you have to :
• Compute by yourself the transform required to draw the image.
• Clip to a triangle, since drawImage would draw a quad.
• drawImage with the right transform.

So the idea is to split your quad into two triangles, and render both.

But there's one more trick : when drawing the lower-right triangle, texture reading should start from the lower-right part of the texture, then move up and left. This can't be done in Firefox, which accepts only positive arguments to drawImage. So i compute the 'mirror' of the first point vs the two others, and i can draw in the regular direction again -the clipping will ensure only right part is drawn-.

fiddle is here :

http://jsfiddle.net/gamealchemist/zch3gdrx/

function rasterizeTriangle(v1, v2, v3, mirror) {
    var fv1 = {
        x: 0,
        y: 0,
        u: 0,
        v: 0
    };
    fv1.x = v1.x;
    fv1.y = v1.y;
    fv1.u = v1.u;
    fv1.v = v1.v;
    ctx.save();
    // Clip to draw only the triangle
    ctx.beginPath();
    ctx.moveTo(v1.x, v1.y);
    ctx.lineTo(v2.x, v2.y);
    ctx.lineTo(v3.x, v3.y);
    ctx.clip();
    // compute mirror point and flip texture coordinates for lower-right triangle
    if (mirror) {
        fv1.x = fv1.x + (v3.x - v1.x) + (v2.x - v1.x);
        fv1.y = fv1.y + (v3.y - v1.y) + (v2.y - v1.y);
        fv1.u = v3.u;
        fv1.v = v2.v;
    }
    // 
    var angleX = Math.atan2(v2.y - fv1.y, v2.x - fv1.x);
    var angleY = Math.atan2(v3.y - fv1.y, v3.x - fv1.x);
    var scaleX = lengthP(fv1, v2);
    var scaleY = lengthP(fv1, v3);
    var cos = Math.cos,
        sin = Math.sin;
    // ----------------------------------------
    //     Transforms
    // ----------------------------------------
    // projection matrix (world relative to center => screen)
    var transfMatrix = [];
    transfMatrix[0] = cos(angleX) * scaleX;
    transfMatrix[1] = sin(angleX) * scaleX;
    transfMatrix[2] = cos(angleY) * scaleY;
    transfMatrix[3] = sin(angleY) * scaleY;
    transfMatrix[4] = fv1.x;
    transfMatrix[5] = fv1.y;
    ctx.setTransform.apply(ctx, transfMatrix);
    // !! draw !!
    ctx.drawImage(bunny, fv1.u, fv1.v, v2.u - fv1.u, v3.v - fv1.v,
    0, 0, 1, 1);
    //
    ctx.restore();
};

Edit : i added the relevant comment of @szym , with his example picture :

This only sort of looks right. If there are any straight lines in the original image you will see that each triangle is warped differently (2 different affine transforms rather than a perspective transform).

回答2:

The effect you're going for is "perspective warping".

Canvas's 2D context cannot do this "out-of-the-box" because it can't turn a rectangle into a trapezoid. Canvas 2D can only do affine transforms which can only form parallelograms.

As user @Canvas says, Canvas 3D (webgl) can do the transforms you're going for.

I did this a while back. It uses Canvas 2d and it redraws an image using 1 pixel wide vertical slices which are stretched to "fake" a perspective warp. You are welcome to use it as a starting point for your project.

Example code and a Demo: http://jsfiddle.net/m1erickson/y4kst2pk/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    //
    var isDown=false;
    var PI2=Math.PI*2;
    var selectedGuide=-1;
    var guides=[];


    //
    var marginLeft=50;
    var marginTop=50;
    var iw,ih,cw,ch;
    var img=new Image();
    img.onload=start;
    img.src='https://dl.dropboxusercontent.com/u/139992952/stack1/buildings1.jpg';
    function start(){

        iw=img.width;
        ih=img.height;
        canvas.width=iw+100;
        canvas.height=ih+100;
        cw=canvas.width;
        ch=canvas.height;
        ctx.strokeStyle="blue";
        ctx.fillStyle="blue";

        guides.push({x:0,y:0,r:10});
        guides.push({x:0,y:ih,r:10});
        guides.push({x:iw,y:0,r:10});
        guides.push({x:iw,y:ih,r:10});

        //
        $("#canvas").mousedown(function(e){handleMouseDown(e);});
        $("#canvas").mousemove(function(e){handleMouseMove(e);});
        $("#canvas").mouseup(function(e){handleMouseUp(e);});
        $("#canvas").mouseout(function(e){handleMouseOut(e);});

        drawAll();
    }

    function drawAll(){
        ctx.clearRect(0,0,cw,ch);
        drawGuides();
        drawImage();
    }

    function drawGuides(){
        for(var i=0;i<guides.length;i++){
            var guide=guides[i];
            ctx.beginPath();
            ctx.arc(guide.x+marginLeft,guide.y+marginTop,guide.r,0,PI2);
            ctx.closePath();
            ctx.fill();
        }
    }

    function drawImage(){

        // TODO use guides 
        var x1=guides[0].x;
        var y1=guides[0].y;
        var x2=guides[2].x;
        var y2=guides[2].y;
        var x3=guides[1].x;
        var y3=guides[1].y;
        var x4=guides[3].x;
        var y4=guides[3].y;


        // calc line equations slope & b (m,b)
        var m1=Math.tan( Math.atan2((y2-y1),(x2-x1)) );
        var b1=y2-m1*x2;
        var m2=Math.tan( Math.atan2((y4-y3),(x4-x3)) );
        var b2=y4-m2*x4;
        // draw vertical slices
        for(var X=0;X<iw;X++){
            var yTop=m1*X+b1;
            var yBottom=m2*X+b2;
            ctx.drawImage( img,X,0,1,ih, 
                X+marginLeft,yTop+marginTop,1,yBottom-yTop );
        }

        // outline
        ctx.save();
        ctx.translate(marginLeft,marginTop);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.lineTo(x4,y4);
        ctx.lineTo(x3,y3);
        ctx.closePath();
        ctx.strokeStyle="black";
        ctx.stroke();
        ctx.restore();
    }



    function handleMouseDown(e){
      e.preventDefault();
      var mouseX=parseInt(e.clientX-offsetX);
      var mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      selectedGuide=-1;
      for(var i=0;i<guides.length;i++){
          var guide=guides[i];
          var dx=mouseX-(guide.x+marginLeft);
          var dy=mouseY-(guide.y+marginTop);
          if(dx*dx+dy*dy<=guide.r*guide.r){
              selectedGuide=i;
              break;
          }
      }
      isDown=(selectedGuide>=0);
    }

    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      var x=parseInt(e.clientX-offsetX)-marginLeft;
      var y=parseInt(e.clientY-offsetY)-marginTop;
      var guide=guides[selectedGuide];
      guides[selectedGuide].y=y;
      if(selectedGuide==0 && y>guides[1].y){guide.y=guides[1].y;}
      if(selectedGuide==1 && y<guides[0].y){guide.y=guides[0].y;}
      if(selectedGuide==2 && y>guides[3].y){guide.y=guides[3].y;}
      if(selectedGuide==3 && y<guides[2].y){guide.y=guides[2].y;}
      drawAll();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Perspective Warp by vertically dragging left or right blue guides.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

回答3:

You need to have a container with perspective and perspective-origin set
You need to use rotateY, skewY and change your heights and width on your image

There is probably a lot of math behind this - personally I just fiddle with it in my browser to make it look pretty close to what I need

So here is a fiddle:

http://jsfiddle.net/6egdevwe/1/

#container { 
margin: 50px; 
perspective: 166px; perspective-origin: 50% 0px; }

#testimage {
transform: rotateY(93.4deg) skewY(34deg);
width: 207px;
height: 195px; }