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

我正在爲朋友建立網站照片庫。圖像作爲簡單的DOM圖像對象（<img src="" />）加載，這些圖像的大小基於瀏覽器大小。所以我用CSS調整它們。用畫布進行圖像可視化。如何調整它們？

這不是一個最佳的解決方案，因爲CSS調整大小似乎改變了圖像的質量，並使其相當像素化。我正在考慮用畫布渲染圖像，然後調整大小以保持質量，但我無法找到關於此在線的任何信息。

任何想法？

2010-03-07 Luca Matteis

事情是這樣的：

<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"); 請記住在部署之前刪除它，因爲這會在每個其他瀏覽器中破壞您的代碼。

來源

2010-03-07 23:23:23 Ronald

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

回答

相關問題