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