如何在画布中对角裁剪图像

我正在尝试将图像裁剪为画布中选定的红色矩形,但我被卡住了。你有什么主意吗?

我有关于坐标矩形和顶点的数据,我可以将其计算为像素。

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 剪辑

  • 剪裁为多边形路径

第三个选项可能最简单,但这可能取决于您打算对裁剪后的图像做什么。即你打算旋转它吗?

这是使用您的图像和类似代码的工作片段:

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Titanium中以圆形裁剪图像?

来自分类Dev

如何在Android中裁剪图像?

来自分类Dev

如何从保存的base64图像中裁剪未使用的画布空间?

来自分类Dev

如何调整大小然后使用画布裁剪图像

来自分类Dev

画布缩放时如何裁剪图像

来自分类Dev

使用JCrop裁剪图像绘制到画布中

来自分类Dev

如何在opencv java中裁剪检测到的面部图像

来自分类Dev

裁剪画布中显示的图像

来自分类Dev

如何在滑行中为圆形裁剪图像制作边框

来自分类Dev

从WPF中的图像裁剪对角线区域

来自分类Dev

如何在Pygame中“裁剪”旋转图像

来自分类Dev

如何在幼虫5.2中缩小尺寸并裁剪图像

来自分类Dev

如何在Android中以矩形为基础裁剪图像?

来自分类Dev

如何在CameraX上的相机预览中裁剪图像矩形

来自分类Dev

如何在画布中显示几个不同的图像?

来自分类Dev

如何在tkinter中停止重叠的画布图像

来自分类Dev

如何按路径而不是区域裁剪画布图像

来自分类Dev

如何在画布上裁剪选定区域的位图?

来自分类Dev

如何在画布元素中向图像添加超链接?

来自分类Dev

如何在png图像中裁剪空白?

来自分类Dev

如何在WPF中从左下角裁剪图像?

来自分类Dev

如何在iOS中裁剪大图像的中心部分?

来自分类Dev

使用JCrop裁剪绘制到画布中的图像

来自分类Dev

我如何在imageview中设置居中(70%)裁剪的图像

来自分类Dev

如何在Android中以矩形为基础裁剪图像?

来自分类Dev

如何从图像画布中裁剪颜色部分?

来自分类Dev

如何在终端中批量/多处理裁剪图像?

来自分类Dev

在 NiFi 中如何裁剪图像?

来自分类Dev

如何在画布元素中获取整个图像?

Related 相关文章

热门标签

归档