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 个答案: