如何使用javascript和画布将图像切割成等距的单独块？
如何使用javascript和画布将图像切割成等距的单独块？
提问于 2019-10-20 17:53:06
有人能帮我做这个吗..。我已经忙了几个星期了.在理论上，任何图像都应该对此工作，我可以上传一个，如果需要，但基本上是一个等距渲染地图从搅拌机.最初从堆栈溢出中查看这个问题：Cutting an Image into pieces through Javascript
但是我的需求有点不同，因为我打算用等距瓷砖切割一整张地图，我已经实现了一个很好的投影公式，但似乎无法将它恰当地应用到我的画布裁剪功能中，这是我目前的片段：
var tileWidth = 256;
var tileHeight = 256;
var totalColumns = 30;
var totalRows = 30;
var isometric = true
var isoOffsetX = 14;
var isoOffsetY = 2;
var isoSpacing = 12;
var image = new Image();
var renderDiv = document.getElementById("render");
image.onload = cutImageUp;
image.src = './test.jpeg';
function cutImageUp() {
var imagePieces = [];
for(var x = 0; x < totalColumns; ++x) {
for(var y = 0; y < totalRows; ++y) {
var canvas = document.createElement('canvas');
canvas.width = tileWidth;
canvas.height = tileHeight;
var context = canvas.getContext('2d');
var tileX = x * tileWidth;
var tileY = y * tileHeight;
if (isometric){
// tileX = (a - b + isoOffsetX) * (tileSize.x / 2 + isoSpacing)
// tileY = (a + b + isoOffsetY) * (tileSize.x / 4 + isoSpacing)
}
context.drawImage(image, tileX, tileY, tileWidth, tileHeight, 0, 0, canvas.width, canvas.height);
imagePieces.push(canvas.toDataURL());
}
}
var imageElement = document.createElement("img");
imageElement.src = imagePieces[0];
renderDiv.appendChild(imageElement);
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>split image into tiles</title>
<!-- <link rel="stylesheet" href="./style.css"> -->
</head>
<body>
<div id="render"></div>
<canvas id="canvas"></canvas>
<script src="./script.js"></script>
</body>
</html>
我真的很感激我能得到的一切帮助，谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-20 18:26:06
用包围盒切割单个瓷砖，并移除角三角形。
使用context.globalCompositeOperation=destination-out绘制要删除https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation的“透明”三角形
否则，当瓷砖已经分开时，处理它们就更容易了：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58475688
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号