我有一个具有四个已知坐标的图像，并且还有一个角度值。如何根据角度值更改图像的视角。我想在 javascript 中完成这个。你能帮我么？如果你能指定我会做的算法。
提前致谢。
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();
}
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;
}
使用上面的代码，我们可以设置位图图像的透视图
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句