用画布进行图像可视化。如何调整它们？

我正在为朋友建立网站照片库。图像作为简单的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

用画布进行图像可视化。如何调整它们？

回答

相关问题