Zeichnung Bild auf Leinwand - größer als real

Ich will ziehen Sie ein Bild aus jpg-Datei auf die Leinwand.
Mein code:

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';

Das problem ist, dass das Bild auf Leinwand ist viel größer als in der Datei. Warum? Wie kann ich zeichnen, Bild der echten Größe?

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

InformationsquelleAutor der Frage latata | 2013-04-03

30

Dies ist Ihr problem:
```
<canvas style="width: 700px; height: 400px;" id="konf"></canvas>
```
Bestimmen Sie die visuelle Größe von der Leinwand, aber nicht die Anzahl der Pixel. Infolgedessen wird der browser die Skalierung der canvas-Pixel.

Die einfachste Lösung ist:
```
<canvas width="700" height="400" id="konf"></canvas>
```
Den width und height Parameter Steuern Sie die Anzahl der Pixel im canvas-Bereich. Ohne CSS-styling, wird die standardmäßige visual Größe des canvas-Bereichs wird auch in dieser Größe, was in einem canvas-pixel per pixel auf dem Bildschirm (vorausgesetzt Sie haben nicht gezoomt web-browser).

Kopieren/einfügen aus meine Antwort auf eine ähnliche Frage:
Darüber nachdenken, was passiert, wenn Sie eine JPG -, dass ist 32x32 (es hat exakt 1024 Pixel Gesamt), aber Sie geben per CSS, es sollte erscheinen als width:800px; height:16px. Das gleiche gilt für HTML Canvas:
- Den width und height Attribute des canvas-element selbst entscheiden, wie viele Pixel Sie schöpfen können. Wenn Sie nicht geben Sie die Höhe und Breite des canvas-element, dann pro specs:
  
  "das width-Attribut standardmäßig auf 300, und das height-Attribut standardmäßig auf 150."
- Den width und height CSS-Eigenschaften Steuern die Größe, die das element zeigt auf dem Bildschirm. Wenn die CSS-Dimensionen sind nicht festgelegt, die intrinsische Größe des Elements wird verwendet für das layout.
Wenn Sie angeben, in CSS eine andere Größe als die tatsächlichen Abmessungen der Leinwand, es muss gestreckt und gequetscht durch den browser für die Anzeige erforderlich sind. Sie können sehen, ein Beispiel dieser hier: http://jsfiddle.net/9bheb/5/
InformationsquelleAutor der Antwort Phrogz
2

Beispiel Arbeiten: http://jsfiddle.net/jzF5R/

Um zu skalieren ein Bild, das Sie brauchen, um die skalierte Breite und Höhe, die Sie wollen, um ctx.drawImage():
```
//x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);
```
Erhalten original Bild Größe:
```
ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
```
Halten canvas aus überquellenden aus der Seite:
```
ctx.canvas.width = document.body.clientWidth;
```
Können Sie einfache Skalierung der Bildbreite und-Höhe auf 70% der ursprünglichen:
```
ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);
```
InformationsquelleAutor der Antwort Alex W
0

Anzeigen ein MJPEG-stream auf einer Leinwand (oder etwas anderes) ohne zu definieren, die Breite und die Höhe des canvas in HTML, so dass nur die Verwendung von CSS, um eine ansprechende Leinwand und fit mit der Seite, ich benutze das:
```
//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);
```
Das Bild ist vollständig enthalten in den canvas-Bereich, was die Größe der Leinwand (das Verhältnis zwischen Höhe und Breite ist nicht gehalten, aber es spielt keine Rolle, ein height:auto; im css beheben kann).

Et voilà !

InformationsquelleAutor der Antwort flgk

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.