如何在画布中对角裁剪图像
跳
我正在尝试将图像裁剪为画布中选定的红色矩形，但我被卡住了。你有什么主意吗？
我有关于坐标矩形和顶点的数据，我可以将其计算为像素。
let arr = [
[2333748.391245694, 6846480.395930305],
[2343351.375319867, 6838186.909684428],
[2339754.200562619, 6834021.75996551],
[2330151.216488446, 6842315.246211386],
[2333748.391245694, 6846480.395930305]
]
let xmax = 2343351.375319867
let xmin = 2330151.216488446
let ymax = 6846480.395930305
let ymin = 6834021.75996551
const mapWidth = xmax - xmin
const mapHeight = ymax - ymin
let h = 600;
let w = 637.0370370370371;
let A = [((arr[0][0] - xmin) * w) / mapWidth, 0]
let B = [w, ((ymax - arr[1][1]) * w) / mapHeight]
let C = [((xmax - arr[0][0]) * w) / mapWidth, h]
let D = [0, ((arr[1][1] - ymin) * w) / mapHeight]
var canvas = document.getElementById('image');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = () => {
context.drawImage(imageObj, ...A, ...B, ...C, ...D);
context.beginPath();
context.lineWidth = "6";
context.strokeStyle = "blue";
context.rect(...A, 5, 5);
context.rect(...B, 5, 5);
context.rect(...C, 5, 5);
context.rect(...D, 5, 5);
context.stroke();
};
imageObj.src = './test.png';
卡利亚泰克
您有几个选择：
旋转基本图像，使剪辑矩形水平和垂直对齐。然后使用
ctx.rect定义剪辑区域。根据@peter-b 的回答使用 CSS 剪辑
剪裁为多边形路径
- SO 上的类似答案：画布-裁剪不同形状的图像
第三个选项可能最简单，但这可能取决于您打算对裁剪后的图像做什么。即你打算旋转它吗？
这是使用您的图像和类似代码的工作片段：
const originalImg = new Image()
originalImg.onload = () => {
const srcCanvas = document.getElementById('srcCanvas')
const srcCtx = srcCanvas.getContext('2d')
// Calculate rect coordinates.
// These are hardcoded approximations for this snippet:
let srcA = [172, 0]
let srcB = [originalImg.width, originalImg.height / 4 * 3 - 50]
let srcC = [465, originalImg.height]
let srcD = [0, originalImg.height / 3]
srcCtx.moveTo(...srcA)
srcCtx.beginPath()
srcCtx.lineTo(...srcB)
srcCtx.lineTo(...srcC)
srcCtx.lineTo(...srcD)
srcCtx.lineTo(...srcA)
srcCtx.closePath()
srcCtx.clip()
srcCtx.drawImage(originalImg, 0, 0)
};
originalImg.src = 'https://i.stack.imgur.com/15BPX.png'<div style="margin-bottom:5rem">
<h4>Clipped</h4>
<canvas id="srcCanvas" width="637" height="600" />
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在Titanium中以圆形裁剪图像？
- 2
如何在css中进行图像裁剪
- 3
如何在Android中裁剪图像？
- 4
如何从保存的base64图像中裁剪未使用的画布空间？
- 5
如何调整大小然后使用画布裁剪图像
- 6
画布缩放时如何裁剪图像
- 7
使用JCrop裁剪图像绘制到画布中
- 8
如何在opencv java中裁剪检测到的面部图像
- 9
裁剪画布中显示的图像
- 10
如何在滑行中为圆形裁剪图像制作边框
- 11
从WPF中的图像裁剪对角线区域
- 12
如何在Pygame中“裁剪”旋转图像
- 13
如何在幼虫5.2中缩小尺寸并裁剪图像
- 14
如何在Android中以矩形为基础裁剪图像？
- 15
如何在CameraX上的相机预览中裁剪图像矩形
- 16
如何在画布中显示几个不同的图像？
- 17
如何在tkinter中停止重叠的画布图像
- 18
如何按路径而不是区域裁剪画布图像
- 19
如何在画布元素中向图像添加超链接？
- 20
如何在png图像中裁剪空白？
- 21
如何在WPF中从左下角裁剪图像？
- 22
如何在iOS中裁剪大图像的中心部分？
- 23
使用JCrop裁剪绘制到画布中的图像
- 24
我如何在imageview中设置居中（70％）裁剪的图像
- 25
如何在Android中以矩形为基础裁剪图像？
- 26
如何从图像画布中裁剪颜色部分？
- 27
如何在终端中批量/多处理裁剪图像？
- 28
在 NiFi 中如何裁剪图像？
- 29
如何在画布元素中获取整个图像？
我来说两句