HTML5 Canvas (с несколькими файлами SVG, нанесенными на холст) для PNG не отображает файлы SVG; Однако PNG не совсем чис ⇐ Html

[Anonymous]

Я работаю над проектом, который неоднократно привлекает HTML -холст, используя комбинацию методов Lineto и Drawmage. Насколько я могу судить, фактическое производство холста работает как предполагалось. (Не все плитки предназначены для заполнения, поэтому изображение ниже представляет собой точный перевод из текстового файла в визуальное представление о нем.) Изображения SVG помещаются в некоторые (но не все) плитки < /p>
Первый сегмент кода, который я поделюсь действиями как нечто вроде драйвера для остальной части функциональности. По сути, открыт локальный текстовый файл (отформатированный в соответствии со спецификами, изложенными в других местах), прочитана из заполнения двух векторов, и те, которые были доступны доступным путем trankgrid () и tileparse (). < /P>
Читатель: < /p>

Код: Выделить всё

document
.getElementById('FileInput')
.addEventListener('change', function (event) {
let file = event.target.files[0];
let reader = new FileReader();

reader.onload = function (event) {
read(event);
drawGrid(tilesWidth,tilesHeight);
tileParse();

//once map is drawn, convert to image for display
//attempts have gone here, removed for legibility and elaboration further down
};

reader.onerror = (event) => alert(event.error.name);
reader.readAsText(file);
});
< /code>
Это вытягивает сетку в холст: < /p>
function drawGrid(width,height){
canvas = document.getElementById("canvas");
canvas.width = width + 20;
canvas.height = height + 20;

if (canvas.getContext) {
const ctxt = canvas.getContext("2d");
ctxt.save();
ctxt.beginPath();

ctxt.strokeStyle = "black";

var pad = 10; //padding
//adjust width and height to account for external grid padding

for(var x = 0; x 
function tileParse(){
for (let row = 0; row < tilesArray.length ; row++) {
for (let col = 0; col < tilesArray[row].length ; col++) {
let type = tilesArray[row][col][0];
let extremeness = tilesArray[row][col][1];

switch(type) {
case 'R':
drawRiver(row,col, extremeness);
break;
case 'M':
drawMountain(row,col, extremeness);
break;
case 'V':
drawValley(row,col, extremeness);
break;
case 'C':
drawSettlement(row,col, extremeness);
break;
case 'F':
drawForest(row,col, extremeness);
break;
default:
//leave blank
}
}
}
}
< /code>
И это один из методов (The DrawRiver ()) методов, вызванных в пределах анализатора плитки, для справки. Все методы очень очень одинаково структурированы, просто с изменениями в соответствии с различными типами (например, гора вместо реки).  < /P>
function drawRiver(tileRow, tileCol, extremeness){
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
const ctxt = canvas.getContext("2d");
var image = new Image(120,120);
image.crossOrigin="anonymous";

switch(extremeness){
case '1':
image.src = 'assets/rivers/River1.svg';
break;
case '2':
image.src = 'assets/rivers/River2.svg';
break;
case '3':
image.src = 'assets/rivers/River3.svg';
break;
case '4':
image.src = 'assets/rivers/River4.svg';
break;
case '5':
image.src = 'assets/rivers/River5.svg';
break;
default:
//use original tile as default
image.src = 'assets/rivers/River.svg';
}

image.onload = () => {
startX = (tileCol*120)+10;
startY = (tileRow*120)+10;

ctxt.drawImage(image, startX, startY, image.width, image.height);
}

}
}
< /code>
Весь этот фон заключается в том, что когда я пытаюсь преобразовать HTML -холст в PNG (для отображения и загрузки, но я не реализовал никаких попыток загрузки функциональности), сетка (поставлена ​​на холст с помощью Lineto ()), но ни одна из SVG не захвачена. Приведенное ниже изображение представляет собой бок о бок с холстом HTML и PNG, который в настоящее время фиксируется моим кодом. PNG показывает только сетку без каких -либо изображений SVG 
Я хочу сгенерировать PNG, который захватывает  все , которое было добавлено в холст. Таким образом, это сравнение бок о бок, если проект работал как намеренный, должно показать два элемента, которые выглядят идентичными при отображении. (Нет визуальных различий, то есть.) < /P>
Примечание. Доступ к файлам SVG хранятся локально на моем компьютере и хранятся в папке активов в репозиции GitHub, к которым я настаиваю, поэтому не должно (?). Захватить HTML Canvas как GIF/JPG/PNG/PDF? 
const canvas = document.getElementById("canvas");
const url = canvas.toDataURL();
console.log(url);
document.getElementById('finMap').src = url;
< /code>
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
document.getElementById('finMap').src = url;
})
< /code>
Both of these techniques, implemented within the reader (the first code snippet I shared), produced the png that only had the grid on it.
This following technique utilizes hongru's Canvas2Image, but I haven't been able to get it to work. It throws the following error: InvalidStateError: CanvasRenderingContext2D.drawImage: Canvas exceeds max size.

import("./canvas2image").then((convertToPNG) => {
console.log(Canvas2Image.convertToPNG(canvas, tilesWidth*120, tilesHeight*120));
})
< /code>
Everything that I've read suggests that one of these methods should have worked, or I should have been generating an entirely blank PNG. I can't figure out where in my implementation things are going awry to be able to further drill down in my troubleshooting.

Подробнее здесь: https://stackoverflow.com/questions/795 ... ot-display