图片局部无失真放大的两种方式

最新推荐文章于 2017-07-28 14:46:20 发布

yuanxxn

最新推荐文章于 2017-07-28 14:46:20 发布

阅读量2.6k

点赞数

分类专栏： vb .net jsp 文章标签： button behavior input server office xhtml

本文链接：https://blog.csdn.net/yuanxxn/article/details/1418662

版权

vb 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

.net

1 篇文章 0 订阅

订阅专栏

jsp

1 篇文章 0 订阅

订阅专栏

这几天在做个项目,需要用到图片的局部放大,开始的时候毫无头绪,经过多方求助和自己的努力,终于算是实现了自己想要的效果,在这里总结一下吧,也给需要的人抛块砖,希望能够引出玉来.

我最开始想到的就是使用jsp了，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<script language =javascript >
var   mm=1;
function   imgzoom(h)
{
if   (h==1)
{
mm+=0.2;
document.all.imgjpg.style.zoom=mm;
document.all.imgjpg.style.width=616px
document.all.imgjpg.style.height=344px

    }
else   if(h==2)
{
mm-=0.2;
document.all.imgjpg.style.zoom=mm;
}
}
</script>
<body>
    <form id="form1" runat= "server">
        <input id="Button1" type="button" value="放大" onclick ="imgzoom(1)" " />
        <input id="Button2" type="button" value="缩小" onclick ="imgzoom(2)" />
     <br />
          <div id="panl" style="width: 616px; height: 344px; z-index: 1; overflow:auto; position: relative; left: 8px; top: 8px;" >
               <asp:Image ID="imgjpg" runat="server" ImageUrl="images/1.jpg" Height="2000px" Width="3000px" /></div>
    </form>
</body>
</html>

以上代码虽然可以实现局部图片的放大，但是有个问题，就是放大后图像的失真很严重，还有就是滚动条位置要是能够初始化就好了。

然后经过查找，发现用vml可以实现图像的矢量化，就可以实现放大不失真了，另外，就是图像也最好是矢量格式的，如wmf格式，经过研究，终于实现了图像的无失真局部放大的效果，代码如下：

</head>
<body>
<input type='button' value="放大" οnclick="rect1.style.width=parseInt(rect1.style.width)*1.4;rect1.style.height=parseInt(rect1.style.height)*1.4;">
<input type='button' value="缩小" οnclick="rect1.style.width=parseInt(rect1.style.width)/1.4;rect1.style.height=parseInt(rect1.style.height)/1.4;">

关于vml的语法，请参考相关的文档，另外，上面代码中的图片位置都需要自己更改一下。