如何使用javascript修复HTML画布对象中的扭曲/扭曲和剪切图像？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用javascript修复HTML画布对象中的扭曲/扭曲和剪切图像？相关的知识，希望对你有一定的参考价值。
我试图用html5中的画布对象的绘图图像功能剪切图像的最大可能方形区域。此外，剪切区域应该是原始图像的中心。
（我也在图像上面渲染水印。）
这可以正常工作，而不是试图切出图像的中心，但每当我尝试这样做时，结果就会变形。
下面的代码片段中也给出了扭曲图像的示例！
要剪切图像的一部分，必须为每2个变量声明两个坐标P1和P2。
坐标系是like this（我认为）：
要计算我正在使用的P1和P2：
imagewidth <imageheight
P1:
----
x1 = 0
y1 = (imageheight / 2) - (imagewidth / 2)
// if I'm replacing y1 with 0, it wont get warped
// but it will cut out the top of the image
and
P2:
----
x2 = imagewidth
y2 = y1 + imagewidth
imagewidth> imageheight
P1:
----
x1 = (imagewidth / 2) - (imageheight / 2)
y1 = 0
// if I'm replacing x1 with 0, it wont get warped
// but it will cut out the most left part of the image
and
P2:
----
x2 = x1 + imageheight
y2 = imageheight
Here is my code:
基本上它写入这个对象：
<div id="buy_imagelist" class=imagelist></div>
var numbers = ["images/test_images/bluefireoly-2.jpg"];
var txt = "";
var numCanvas = 0;
for(var src in numbers) {
numCanvas++;
}
var i = 0;
for(var src in numbers) {
txt = txt + '<canvas class=imagelistsingle style=padding:7px id=myCanvas' + i + ' width="300" height="300"></canvas>';
i++;
}
document.getElementById('buy_imagelist').innerHTML = txt;
var imageNumber_canvas = 0;
numbers.forEach(myFunction);
function myFunction(value, index, array) {
var canvas = document.getElementById('myCanvas' + imageNumber_canvas);
if(canvas == null) {
window.alert("Error - Images could not be loaded");
}
var context = canvas.getContext('2d');
function loadImages(imagelist, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in imagelist) {
numImages++;
}
for(var src in imagelist) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = imagelist[src];
}
}
var imagelist = {
testimage: value,
wasserzeichen: "images/wasserzeichen/wasserzeichen_1.png"
};
loadImages(imagelist, function(images) {
var testimage = images.testimage;
var imagewidth = testimage.naturalWidth;
var imageheight = testimage.naturalHeight;
var x1 = 0;
var y1 = 0;
var x2 = imagewidth;
var y2 = imageheight;
if(imagewidth !== imageheight) {
if(imageheight < imagewidth) {
x1 = (imagewidth / 2) - (imageheight / 2);
y1 = 0;
x2 = x1 + imageheight;
y2 = imageheight;
} else {
x1 = 0;
y1 = (imageheight / 2) - (imagewidth / 2);
x2 = imagewidth;
y2 = y1 + imagewidth;
}
}
context.drawImage(testimage, x1, y1, x2, y2, 0, 0, 300, 300);
context.drawImage(images.wasserzeichen, 0, 0, 300, 300);
});
imageNumber_canvas++;
}
正如所料，这适用于方形图像。
错误必须在某处（特别是我用“//！”标记的地方）
var testimage = images.testimage;
var imagewidth = testimage.naturalWidth;
var imageheight = testimage.naturalHeight;
var x1 = 0;
var y1 = 0;
var x2 = imagewidth;
var y2 = imageheight;
if(imagewidth !== imageheight) {
if(imageheight < imagewidth) {
x1 = (imagewidth / 2) - (imageheight / 2); //!
y1 = 0;
x2 = x1 + imageheight;
y2 = imageheight;
} else {
x1 = 0;
y1 = (imageheight / 2) - (imagewidth / 2); //!
x2 = imagewidth;
y2 = y1 + imagewidth;
}
}
context.drawImage(testimage, x1, y1, x2, y2, 0, 0, 300, 300);
context.drawImage(images.wasserzeichen, 0, 0, 300, 300);
对于上面给出的非方形图像（1028x1920）（宽度<高度）
- > y1 = 446 - >所以y2 = 446 + 1028 = 1474
所以y1> 0 所以y2 <身高 - >切出的正方形应该适合原始图像
使用此代码自行试用:(单击“整页”查看图像）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="buy_imagelist" class=imagelist></div>
<script>
var numbers = ["https://i.pinimg.com/originals/46/1c/01/461c0133da95e315cd4e245f79219ec0.jpg"];
var txt = "";
var numCanvas = 0;
for (var src in numbers) {
numCanvas++;
}
var i = 0;
for (var src in numbers) {
txt = txt + '<canvas class=imagelistsingle style=padding:7px id=myCanvas' + i + ' width="300" height="300"></canvas>';
i++;
}
document.getElementById('buy_imagelist').innerHTML = txt;
var imageNumber_canvas = 0;
numbers.forEach(myFunction);
function myFunction(value, index, array) {
var canvas = document.getElementById('myCanvas' + imageNumber_canvas);
if (canvas == null) {
window.alert("Error - Images could not be loaded");
}
var context = canvas.getContext('2d');
function loadImages(imagelist, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in imagelist) {
numImages++;
}
for (var src in imagelist) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = imagelist[src];
}
}
var imagelist = {
testimage: value
};
loadImages(imagelist, function(images) {
var testimage = images.testimage;
var imagewidth = testimage.naturalWidth;
var imageheight = testimage.naturalHeight;
var x1 = 0;
var y1 = 0;
var x2 = imagewidth;
var y2 = imageheight;
if (imagewidth !== imageheight) {
if (imageheight < imagewidth) {
x1 = (imagewidth / 2) - (imageheight / 2);
y1 = 0;
x2 = x1 + imageheight;
y2 = imageheight;
} else {
x1 = 0;
y1 = (imageheight / 2) - (imagewidth / 2);
x2 = imagewidth;
y2 = y1 + imagewidth;
}
}
context.drawImage(testimage, x1, y1, x2, y2, 0, 0, 300, 300);
});
imageNumber_canvas++;
}
</script>
</body>
</html>答案
drawImage方法的第4和第5个参数是width和height，而不是x2和y2。
MDN上的文档在第一个例子中使用了这个
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
随着解释
源图像取自坐标（33,71），宽度为104，高度为124.它被画在（21,20）处的画布上，其宽度为87，高度为104。
tl;博士
您必须提供剪切图像的宽度/高度，而不是右下角的坐标：
context.drawImage(testimage, x1, y1, x2 - x1, y2 - y1, 0, 0, 300, 300);
以上是关于如何使用javascript修复HTML画布对象中的扭曲/扭曲和剪切图像？的主要内容，如果未能解决你的问题，请参考以下文章
无法理解此 JavaScript 代码来绘制 HTML 画布？ [关闭]