Disegno immagine su tela - più grande del reale

Question

Voglio disegnare un'immagine da un file jpg su tela. Il mio codice:

var canvas = document.getElementById('my_canvas'); 
    var ctx = canvas.getContext('2d'); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0); 
    }; 
    imageObj.src = 'img/my_image.jpg'; 

Il problema è che l'immagine su tela è molto più grande nel file. Perché? Come posso disegnare le dimensioni reali dell'immagine?

UPDATE: risultato: http://jsfiddle.net/AJK2t/

Answer 1

Questo è il tuo problema:

<canvas style="width: 700px; height: 400px;" id="konf"></canvas> 

Si sta impostando la dimensione visual del vostro tela, ma non il numero di pixel . Di conseguenza, il browser ridimensiona i pixel del canvas.

La correzione più semplice è:

<canvas width="700" height="400" id="konf"></canvas> 

I width e height parametri controllare il numero di pixel in tela. Senza lo stile CSS, anche la dimensione visiva predefinita della tela sarà di queste dimensioni, risultando in un pixel di tela per pixel dello schermo (supponendo che non sia stato eseguito lo zoom del browser Web).

Copia/incolla da my answer to a related question:

Pensate a cosa succede se si dispone di un JPG che è 32x32 (che ha esattamente 1.024 pixel totali), ma specificare tramite CSS che dovrebbe comparire come width:800px; height:16px . La stessa cosa vale per HTML Canvas:

• I width e height attributi dell'elemento tela stessa decidere quanti pixel è possibile disegnare su. Se non si specifica l'altezza e la larghezza dell'elemento canvas, quindi per the specs:
  "l'attributo larghezza è impostato su 300 e l'attributo altezza su 150 è predefinito."

• width e height Le proprietà CSS controllano le dimensioni visualizzate dall'elemento sullo schermo.Se le dimensioni CSS non sono impostate, la dimensione intrinseca dell'elemento viene utilizzata per il layout.

Se si specifica in CSS una dimensione diversa rispetto alle dimensioni effettive della tela deve essere allungato e schiacciato dal browser, se necessario per la visualizzazione. Si può vedere un esempio di questo qui: http://jsfiddle.net/9bheb/5/

Answer 2

lavoro Esempio: http://jsfiddle.net/jzF5R/

Al fine di ridimensionare l'immagine è necessario fornire la larghezza ridotta e l'altezza che si desidera ctx.drawImage():

// x, y, width, height 
ctx.drawImage(imageObj, 0, 0, 100, 50); 

Mantieni le dimensioni dell'immagine originale:

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height); 

Tenere tela traboccante fuori dalla pagina:

ctx.canvas.width = document.body.clientWidth; 

Si può facilmente ridimensionare la larghezza e l'altezza al 70% dell'originale:

ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7); 

Answer 3

Per visualizzare un flusso MJPEG su una tela (o altro), senza definire la larghezza e l'altezza della tela in HTML, in modo che solo usando i CSS per ottenere un sensibile canvas e in forma con la pagina, io uso che:

//get size from CSS 
var sizeWidth = context.canvas.clientWidth; 
var sizeHeight = context.canvas.clientHeight; 
//here the solution, it replaces HTML width="" height="" 
canvas.width = sizeWidth; 
canvas.height = sizeHeight; 
........... 
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight); 

l'immagine è interamente contenuta nella tela qualunque sia la dimensione della tela (il rapporto tra altezza e larghezza non viene mantenuto, ma non importa, un height:auto; in css può risolvere il problema).

Et voilà!