用于更改图像视角的算法是什么？

Question

I've an image with four known coordinates, and also have an agle value.How can i change the perspective of the image based on the angle value. I wana complete this in javascript. Can you please help me? If you can specify the algorithm i'll do.

Thanks in advance.

      var c= document.getElementById('canvas');
      var ctx=c.getContext("2d");
      var base=document.getElementById('base');
      var layer0=document.getElementById('layer0');;
      var layer1=document.getElementById("layer1");

     var wall1=document.getElementById("wall1");
     var wall2=document.getElementById("wall2");

     // ctx.drawImage(layer0,50,50);
    //ctx.drawImage(layer1,50,50);

          var canvas2 = document.createElement("canvas");
          var context2 = canvas2.getContext("2d");
          canvas2.width=layer1.width;
          canvas2.height=layer1.height;
         context2.drawImage(layer1,0,0);

         var canvas4= document.createElement("canvas");
         var context4 = canvas4.getContext("2d");
         // canvas2.width=layer0.width;
         //canvas2.height=layer0.height;
         context4.drawImage(wall1,0,0);
        // context2.globalCompositeOperation="source-atop";
       //context2.drawImage(wall1,0,0);
       ctx.drawImage(base,50,50,1200,700);

        var img=new Image();
        img.width=layer0.width;
        img.height=layer0.height;
        img.src=canvas2.toDataURL();


         var canvas3 = document.createElement("canvas");
         var context3 = canvas3.getContext("2d");
         canvas3.width=layer0.width;
         canvas3.height=layer0.height;
         context3.drawImage(layer0,0,0);

      var canvas5= document.createElement("canvas");
      var context5 = canvas5.getContext("2d");

      context5.drawImage(wall2,0,0);

     var img1=new Image();
     img1.width=layer1.width;
     img1.height=layer1.height;
     img1.src=canvas3.toDataURL();
    // ctx.drawImage(img1,50,50,1200,800);
    imgperspective(canvas2,canvas4.toDataURL(),120)
   //imgperspective(canvas3,canvas5.toDataURL(),30)
   function imgperspective(wallImage,effectImg,aangle)
   {
    var canvas1 = document.createElement('canvas');
     var ctx1 = canvas1.getContext('2d');

     var imgObj = new Image();
     imgObj.src = wallImage.toDataURL();
   var wallHeight, wallWidth , wallName , noPixelsPerFeet,     angle 
    =aangle,

    scale;

    scale =angle/180.0;
    console.log("scale = "+scale);
    imgObj.onload = function() {
    var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas1.width = imgW;
    canvas1.height = imgH;
    ctx1.drawImage(this, 0, 0, imgW, imgH);
    var h = imgH;
    var w = imgW;
    var idata = ctx1.getImageData(0, 0, imgW, imgH),
        buffer = idata.data,
        buffer32 = new Uint32Array(buffer.buffer),
        x, y,
        x1 = w,
        y1 = h,
        x2 = 0,
        y2 = 0;
    //make first column transparent
    for (i = 0; i < h; i++) {
        buffer32[0 + (i*w)] = 0;
    }
    // get left edge
    for (y = 0; y < h; y++) {
        for (x = 0; x < w; x++) {
            if (buffer32[(x+(y*w))] > 0) {
                if (x < x1) x1 = x;
            }
        }
    }

    // get right edge
    for (y = 0; y < h; y++) {
        for (x = w; x >= 0; x--) {
            if (buffer32[(x+(y*w))] > 0) {
                if (x > x2) x2 = x;
            }
        }
    }

    // get top edge
    for (x = 0; x < w; x++) {
        for (y = 0; y < h; y++) {
            if (buffer32[(x+(y*w))] > 0) {
                if (y < y1) y1 = y;
            }
        }
    }

    // get bottom edge
    for (x = 0; x < w; x++) {
        for (y = h; y >= 0; y--) {
            if (buffer32[(x+(y*w))] > 0) {
                if (y > y2) y2 = y;
            }
        }
    }
       var dimensions = [(x1+0.5),(y1+0.5),(x2-x1),(y2-y1)];
       console.log(dimensions);
       var imgObj1 = new Image();
       imgObj1.src = effectImg;
         imgObj1.onload = function() {
        ctx1.globalCompositeOperation = "source-atop";
        var temp = perspectiveA(imgObj1, dimensions);
        var newImg = new Image();
        newImg.src = temp;


                var temp = perspectiveA(imgObj1, scale);
                var newImg = new Image();
                newImg.src = temp;
                newImg.onload = function() {

              ctx1.drawImage(newImg, (x1+0.5), (y1+0.5), (x2-x1),(y2- y1));
                    var image =new Image();
                    image.src= canvas1.toDataURL();

                    ctx.drawImage(image,50,50,1200,700);

      }
      }}}
     function perspectiveA(selectedRaster, scale) {
    pixelWidth = 1;
     var canvas2 = document.createElement("canvas");
     var context2 = canvas2.getContext('2d');
     canvas2.width = selectedRaster.width;
    canvas2.height = selectedRaster.height;
    var widthSlices = (selectedRaster.width*0.5),
    heightSlices = (selectedRaster.height*0.5),
    sliceWidth = (selectedRaster.width/ widthSlices),
    sliceHeight =(selectedRaster.height/ 2),
    heightScale = ((scale)/widthSlices),
    widthScale = (pixelWidth/selectedRaster.width);

     for (var i = 0; i < widthSlices; i++) {
    var sx = (sliceWidth*i),
        sy = 0;

    var dx = (sliceWidth*i),
        dHeight = (sliceHeight*(1 + (heightScale* ((widthSlices-1)- i)))),
        dy = 0,
        dWidth = (sliceWidth * 1 + (widthScale*((widthSlices-1)-i)));
       var moveY = (dHeight-sliceHeight);

    context2.drawImage(selectedRaster, sx, sy, sliceWidth, sliceHeight, dx, 
     (dy-moveY), dWidth, dHeight);
    sy = sliceHeight;
    dy = sliceHeight;
    dHeight = (sliceHeight*(1 + (heightScale*((widthSlices-1),- i))));
    moveY = (dHeight- sliceHeight);
    context2.drawImage(selectedRaster, sx, sy, sliceWidth, sliceHeight, dx, 
       dy, dWidth, dHeight);
      }
       return canvas2.toDataURL();
             }

Answer 1

    float[] src = {0, 0, w, 0, 0, h, w, h};
     float[] dst = {startWidth, startHeight, endWidth, startHeight,startWidth, endHeight, endWidth, endHeight};
     Bitmap transformed = cornerPin(wall, src, dst);
      public static Bitmap cornerPin(Bitmap b, float[] srcPoints, float[] dstPoints) {
    int w = b.getWidth(), h = b.getHeight();
    Bitmap result = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
    Canvas c = new Canvas(result);
    Matrix m = new Matrix();
    m.setPolyToPoly(srcPoints, 0, dstPoints, 0, 4);
    c.drawBitmap(b, m, p);
    return result;
}

Using above code we can Set perspective of an Bitmap Image