Может кто-нибудь помочь мне с этим ... Я застрял с этой проблемой в течение нескольких недель сейчас ... Теоретически любое изображение должно работать для этого, я могу загрузить одно, если это необходимо, но в основном это изометрическая визуализациякарта из Blender ... Изначально, глядя на этот вопрос из stackoverflow: Разрезание изображения на куски с помощью 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>
Я очень ценю любую помощь, которую я могу получить, заранее спасибо!