Я работаю над приложением для создания карт. Идея заключается в том, чтобы иметь файл CSV с данными для каждой карты, папку с изображениями и создать карту для каждого персонажа, который у меня есть, после загрузки файла CSV. Пока все хорошо, но я застрял в написании текста перед холстом.
Холст создается путем наложения множества разных изображений, но текст появляется на самом фоне и в итоге получается полностью покрыты другими изображениями. Я хочу, чтобы тексты были перед ним!
Я запускаю все при загрузке файла CSV, содержащего данные, и на самом деле использую « context.fillText », но не работает, так как хочу, чтобы он работал.
Как я могу поместить текст из переменных в последние 3 "context.fillText" перед холстом? Конечная цель - создать один холст, который я могу сохранить как изображение.
И это мой код
$( document ).ready(function() {
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
document.getElementById('txtFileUpload').addEventListener('change', upload, false);
function upload(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
var csvData = event.target.result;
Papa.parse(csvData, {
complete: function (results) {
console.log(results.data);
var imgStelle;
var imgClan;
var immagine;
var numeroCarte=(results.data.length);
for(var i=0; i<numeroCarte; i++){
var clan=(results.data[i][0]);
var nome =(results.data[i][1]);
var rarita =(results.data[i][2]);
var stelle =(results.data[i][3]);
var potenza =(results.data[i][4]);
var danno =(results.data[i][5]);
var potere =(results.data[i][6]);
var bonus=(results.data[i][7]);
var nomeintero=(results.data[i][8]);
imgStelle = "Immagini/LivelloCarte/livello"+ stelle +".png";
imgClan= "Immagini/IconeClan/"+ clan +"_42.png";
if (rarita=="Non comune"){
imgRarita = "Immagini/RaritaCarta/raritanoncomune.png";
} else {
imgRarita = "Immagini/RaritaCarta/rarita"+rarita+".png";
}
immagine ="Immagini/ImmaginiChar/"+clan+"_"+nomeintero+"_N"+stelle+"_HD_673.png"
var sources = {
image1: 'Immagini/SfondoCarte/base.png',
image2:'Immagini/SfondoCarte/riquadro.png',
image3: immagine,
image4:'Immagini/SfondoCarte/poteri.png',
image5: imgRarita,
image6: imgStelle,
image7: 'Immagini/SfondoCarte/riquadrobis.png',
image8: imgClan,
image9: 'Immagini/Numeri/'+potenza+'.png',
image10:'Immagini/Numeri/'+danno+'.png',
};
loadImages(sources, function(images) {
context.drawImage(images.image1, 0, 0, 2220 , 3240); //SFONDO * x - y
context.drawImage(images.image2, 80, 80, 2040 ,1900);//RIQUADRO
context.drawImage(images.image3, 0, 0, 2220 ,3150); //IMMAGINE *
context.drawImage(images.image4, 80, 2000, 2050 ,1150); //LAYOUT POTERI *
context.drawImage(images.image5, 520, 80, 1610 ,200); //RARITA *
context.drawImage(images.image6, 600, 2000, 1240 ,260); //STELLE *
context.drawImage(images.image7, 100, 70, 360 ,360); //RIQUADRO CLAN *
context.drawImage(images.image8, 120, 80, 320 ,320); //CLAN *
context.drawImage(images.image9, 170, 2350, 130 ,170); //FORZA *
context.drawImage(images.image10, 170, 2950, 130 ,170); //DANNO *
});
context.font = "40pt Calibri";
context.fillText(nome, 20, 20);
context.fillText(potere, 20, 20);
context.fillText(bonus, 20, 20);
}
}
});
};
}
});
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"type="text/css" />
<link rel="stylesheet" href="Pagina.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<script src="Pagina.js"></script>
<script src="papaparse.js"></script>
<script src="papaparse.min.js"></script>
<title>Card maker</title>
</head>
<body>
<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
<div class="cartaSingola">
<div class="contenitoreCarte">
<canvas id="myCanvas" width="2500" height="3500"></canvas>
</div>
</div>
</body>
</html>