html的canvas畫圖問題

drawImage()參考了 https://www.php.cn/html5-tutorial-362901.html

注：我的環境爲win7 64bit，360瀏覽器

 

針對html的canvas，最近兩天在用它顯示圖片，圖片是從服務器上讀出來的，canvas容器如下代碼所示：

<text id="imgResolution"></text>
<text id="mousePosOnCans" style="color:blue;"></text>

<div id="canvContainer" style="border:1px solid darkred;width:100%;height:100%;text-align:center;">
    <canvas id="canPic" width="100%" height="100%" onmousemove="onmousemove_oncanvas(event);" onmouseout="onmouseout_oncanvas();" style="border:1px solid red;">
        Your browser does not support the canvas element. Please upgrade your browser.
    </canvas>
</div>

開始兩個內容用來顯示圖片分辨率和鼠標在canvas上移動時的座標，後面的這個canvas被放在了一個div中，以方便以後對其位置進行控制，div和canvas都加上個外框的顏色，以方便查看它們的位置。

Javascript的圖片裝載代碼如下：

function GetAImage(curImgFileName) {
    var Img = new Image();
    Img.src = '/GetImage?fileName=' + curImgFileName;
    Img.onload = function(){
        var mousePosHo = Gho("imgResolution");
        mousePosHo.innerText = "圖片大小：" + Img.width + "*" + Img.height;

        var canvContainer = Gho("canvContainer");
        var imgCanv = Gho("canPic");
        var conerHeight = window.innerHeight;
        conerHeight -= canvContainer.offsetTop;
        canvContainer.offsetLeft = "4px";
        var conerWidth = window.innerWidth - 4 * 2 - 12;
        canvContainer.style.width = conerWidth + "px";
        canvContainer.style.height = conerHeight + "px";

        conerWidth -= 4;
        conerHeight -= 4;
        var conerBl = conerWidth / conerHeight;
        var imgBl = Img.width / Img.height;
        var canvWidth = conerWidth;
        var canvHeight = conerHeight;
        if (imgBl > conerBl)
        {
            canvHeight = parseInt(canvWidth / imgBl);
        }
        else
        {
            canvWidth = parseInt(canvHeight * imgBl);
        }

        // 主要看這裏，以及下面幾行內容就行了，問題就在這個尺寸以及後面的drawImage()調用
        imgCanv.style.width = canvWidth + "px";
        imgCanv.style.height = canvHeight + "px";

        var ctx = imgCanv.getContext("2d");
        ctx.drawImage(Img, 0, 0, canvWidth, canvHeight);
    }
}

圖片是通過服務器的 GetImage() 獲取的。先說原始圖片如下的樣子(1920*1080)：

針對GetAImage()的最後幾行，如下各種不同的實驗。注意，我的最終目標是顯示整張圖片出來。

其中一篇文章很不錯，效果非常直觀：https://www.cnblogs.com/superstar/p/5118683.html

1. 顯示了一部分

javascript如下：

imgCanv.style.width = canvWidth + "px";
imgCanv.style.height = canvHeight + "px";

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 0, 0, canvWidth, canvHeight);

效果如下：

指定的參數應該是顯示到整個canvas的區域，這個是沒錯，但只顯示了圖片左上角的一小部分內容。

2. 顯示整張圖片，但是非常模糊

javascript如下：

imgCanv.style.width = canvWidth + "px";
imgCanv.style.height = canvHeight + "px";

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 0, 0, 100, 100);

效果如下：

這個問題嚴重，drawImage()的後兩個參數有點奇怪，應該顯示在canvas的左上角(0,0)，長寬都是100，但它卻顯示到了整個canvas上。

3. 對2進行稍許修改如下：

imgCanv.style.width = canvWidth + "px";
imgCanv.style.height = canvHeight + "px";

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 0, 0, 50, 50);        // 只是由100改成了50

效果如下：

和2相比，這個顯示的寬高都變成了原來的一半

4. 再對這個參數稍做修改如下：

imgCanv.style.width = canvWidth + "px";
imgCanv.style.height = canvHeight + "px";

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 25, 0, 50, 50);

效果如下：

和上面的對比可以看出，drawImage()的4個參數變成了canvas尺寸的百分比，但表示的意義沒變（前兩個表示位置，後兩個表示畫到canvas上的尺寸）

5. 去掉canvas尺寸的單位“px”

Javascript如下所示：

imgCanv.style.width = canvWidth;
imgCanv.style.height = canvHeight;

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 0, 0, 100, 100);

效果如下：

這次變成了這麼小，但充滿了整個canvas。這個意思就是設置canvas的尺寸沒有起效，尺寸後面的單位看起來非常重要

6. 繼續修改drawImage()的後兩個參數

Javascript如下所示：

imgCanv.style.width = canvWidth;
imgCanv.style.height = canvHeight;

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 0, 0, 50, 50);

效果如下：

這個依然變成了尺寸的比例

7. 修改尺寸的指定方式

Javascript如下：

imgCanv.width = canvWidth + "px";
imgCanv.height = canvHeight + "px";

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 0, 0, canvWidth, canvHeight);

效果如下：

這次竟然啥都不顯示了！width和style.width究竟有啥區別？實在搞不清楚，在style.width需要帶參數，但直接width就不能帶參數了

8. 去掉尺寸參數再試

Javascript如下：

imgCanv.width = canvWidth;
imgCanv.height = canvHeight;

var ctx = imgCanv.getContext("2d");
ctx.drawImage(Img, 0, 0, canvWidth, canvHeight);

效果如下：

終於好了！總結就是使用 htmlobj.width、htmlobj.height來指定尺寸，同時不要帶單位"px"。

這個摸索了一下午，基本上總算弄清楚了，真是太不容易了