在畫布上繪製圖像 - 大於真實

我想從畫布上的jpg文件中繪製圖像。我的代碼：在畫布上繪製圖像 - 大於真實

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

的問題是，在畫布上的圖像比文件大很多。爲什麼？我如何繪製圖像的實際尺寸？

UPDATE：結果：http://jsfiddle.net/AJK2t/

來源

2013-04-03 latata

這是你的問題：

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

您正在設置您的可視尺寸畫布，但不是像素數。因此瀏覽器正在縮放畫布像素。

最簡單的解決方法是：

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

width的和height參數控制在畫布的像素的數量。在沒有CSS樣式的情況下，畫布的默認視覺大小也會是這個大小，從而導致每個屏幕像素一個畫布像素（假設您沒有縮放Web瀏覽器）。從my answer to a related question

複製/粘貼：

想想，如果你有一個JPG即是 32×32發生了什麼（它具有完全相同總共1024個像素），但通過CSS指定它應該出現爲width:800px; height:16px 。同樣的道理也適用於HTML畫布：

canvas元素本身決定你能有多少像素藉鑑的width和height屬性。如果不指定畫布元素的高度和寬度，則per the specs：
「寬度屬性默認爲300，高度屬性默認爲150。

width和height CSS屬性控制元素在屏幕上顯示的大小。如果未設置CSS尺寸，則使用元素的固有尺寸進行佈局。

如果您在CSS中指定與畫布的實際尺寸不同的尺寸，則必須根據需要將其展開並壓扁。你可以看到這個在這裏一個例子：沒有定義的寬度和在HTML畫布的高度http://jsfiddle.net/9bheb/5/

來源

2013-04-03 18:08:26 Phrogz

工作實施例：http://jsfiddle.net/jzF5R/

爲了擴大需要提供經縮放的寬度和高度要ctx.drawImage()圖像：

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

保持原圖尺寸：

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

您可以輕鬆地縮放圖像的寬度和高度與原70％：溢出關閉頁面

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

保持帆布

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

來源

2013-04-03 17:12:04

...如果你縮放，你可能想按比例縮放圖像的寬度/高度，所以你不會擠壓圖像;） – markE

ctx.drawImage（imageObj，0，0，imageObj.width， imageObj.height）;不適合我。檢查：http://jsfiddle.net/AJK2t/ – latata

@markE這是爲了演示目的.. –

要顯示畫布（或別的東西）上MJPEG流，所以只能使用CSS得到響應帆布和配合的頁面，我用：

//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);

圖片被完全包含在任何畫布（高度和寬度之間的比率的大小不能保持在畫布上，但不要緊，一在css中的height:auto;可以解決這個問題）。

等voilà！

來源

2015-04-12 10:06:42 flgk

在畫布上繪製圖像 - 大於真實

回答

相關問題