用畫布進行圖像可視化。如何調整大小？

Question

我正在為朋友建立一個網站照相館。 圖像作為簡單的DOM圖像對象（ <img src="" /> ）加載，這些圖像的大小基於瀏覽器的大小。 所以我用CSS調整它們的大小。

這不是最佳解決方案，因為CSS調整大小似乎會改變圖像的質量並相當像素化。 我當時想用畫布渲染圖像，然后用它調整大小，以使畫質保持有效，但是我無法在網上找到有關此信息。

有任何想法嗎？

Answer 1

像這樣：

<html>
<head>
<script type="text/javascript">

function init(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var image = new Image();
    image.onload = function(){
       ctx.drawImage(image, x, y, width, height);
    };

    image.src = "filename.jpg";
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>

可能是最好的資源： https : //developer.mozilla.org/en/Canvas_tutorial/Using_images

順便說一句：加載圖像時，您可能會遇到跨域問題。 我認為在Firefox中，錯誤類似於NS_SECURITY等等等等。只要確保您的頁面和圖像來自同一位置即可。 您可能必須使用Web服務器來測試開發。 另外，在Firefox中進行開發時，可以將其放在JavaScript中以忽略以下安全限制： netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); 請記住在部署之前將其刪除，因為這將破壞其他所有瀏覽器中的代碼。

用畫布進行圖像可視化。如何調整大小？

問題描述

1 個解決方案

解決方案1
1 已采納 2010-03-07 23:23:23

用畫布進行圖像可視化。 如何調整大小？

問題描述

1 個解決方案

解決方案1 1 已采納 2010-03-07 23:23:23

用畫布進行圖像可視化。如何調整大小？

解決方案1
1 已采納 2010-03-07 23:23:23