resize div in html2canvas
Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
-
andras
- Mesaje:430
resize div in html2canvas
Salut,
Cum redimensionez un <div> la preluarea in canvas cu
Cod: Selectaţi tot
html2canvas( document.getElementById('board'), {
onrendered: function(canvas) {
canvas.id = "canvasboard";
document.getElementById('diagrama').appendChild(canvas);
}
});
spre exemplu daca div-ul are
Cod: Selectaţi tot
<div id="board" style="width:100%; height:100%;"></div>
vreau ca in canvas sa-mi fie redus div-ul la 50%. In prezent div-ul (in care am pus o diagrama de sah) nu apare intreg in canvas, doar aproximativ 90% pe latime (lipseste partea din dreapta) indiferent ce valori scriu eu in style sau chiar daca nu folosesc style tot nu-mi preia corect. Am incercat si width:300, height:300 direct in functia html2canvas dar tot nu salveaza corect. Multumesc.
MarPlo
Mesaje:4343
Salut
Nu stiu exact solutia, si nici nu folosesc html2canvas. Pot doar sa incerc sa ajut cu idei din ceea ce stiu.
1. Daca elementele din acel Div au dimensiuni fixe care depasesc lungimea care vrei, degeaba setezi o dimensiune mai mica la div-ul parinte. Trebuie sa redimensionezi si ce e in acel Div, sa nu depaseasca de exemplu 300px.
2. Incearca sa maresti lungimea la canvas.
andras
Mesaje:430
E buna ideea cu lungimea canvas-ului, l-am facut putin mai mare si acum imi prinde toata diagrama. Nu poate sa faca scalare dar tot e mai bine ca inainte. Canvas-ul vreau acum sa-l dsalvez intr-un .jpg. Acolo exista o posibilitate sa fac jpg-ul mai mic (50%)? Multumesc.
MarPlo
Mesaje:4343
Nu stiu cu ce cod faci jpg-ul. Dar poti sa faci resize la canvas cat vrei sa fie dimensiunile imaginii, dupa ce se creaza continutul in ea si inaite de a face jpg-ul.
Cam asa:
Cod: Selectaţi tot
html2canvas( document.getElementById('board'), {
onrendered: function(canvas) {
canvas.id = "canvasboard";
document.getElementById('diagrama').appendChild(canvas);
},
width: 500,
height: 500
});
//resize canvas
if(document.getElementById('canvasboard')){
var canvas = document.getElementById('canvasboard');
canvas.style.width='300px';
canvas.style.height='300px';
}
// make the jpg