首页 > 其他分享 >图像缩放

图像缩放

时间:2023-10-04 10:12:17浏览次数:30  
标签:镜头 img 缩放 px lens result 图像

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*设置镜头的大小:*/
  width: 100px;
  height: 100px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*设置结果div的大小:*/
  width: 300px;
  height: 300px;
}
</style>
<script>
function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /*创建镜头:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*插入镜头:*/
  img.parentElement.insertBefore(lens, img);
  /*计算结果DIV与lens的比值:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*为结果DIV设置背景属性:*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*当有人将光标移到图像或镜头上时执行函数:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /* 也适用于触摸屏:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*防止在图像上移动时可能发生的任何其他操作:*/
    e.preventDefault();
    /*获取光标的x和y位置:*/
    pos = getCursorPos(e);
    /*计算镜头的位置:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*防止镜头位于图像之外:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*设置镜头的位置:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*显示镜头“看到”的内容:*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*获取图像的x和y位置:*/
    a = img.getBoundingClientRect();
    /*计算光标相对于图像的 x 和 y 坐标:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*考虑任何页面滚动:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>
</head>
<body>

<h1>图像缩放</h1>

<p>鼠标悬停在图片上:</p>

<div class="img-zoom-container">
  <img id="myimage" src="img_girl.jpg" width="300" height="240">
  <div id="myresult" class="img-zoom-result"></div>
</div>

<p>结果可以放在页面的任何地方,但必须有类名“img-zoom-result”。</p>
<p>确保图像和结果都有 ID。 确保 ID 是唯一的 在 javaScript 启动缩放效果时使用。</p>

<script>
// 初始化缩放效果:
imageZoom("myimage", "myresult");
</script>
</body>
</html>

 

标签:镜头,img,缩放,px,lens,result,图像
From: https://www.cnblogs.com/tcyweb/p/17741987.html

相关文章

  • 图像的基本操作
    ......
  • 小程序技术未来发展的思考 - 人工智能技术与图像识别
    微信小程序、支付宝小程序等已经成为移动应用开发的主要方式之一,未来的小程序技术将继续融合人工智能技术,其中之一就是图像识别。图像识别技术使小程序能够更智能地处理图像数据,提供更个性化和智能化的用户体验。在本文中,我们将探讨小程序技术在人工智能技术和图像识别方面的发展趋......
  • 轻松完成图像处理任务的Python工具
    随着数字时代的到来,图像处理技术越来越重要。Python作为一门功能强大、易学易用的编程语言,自然也成为了图像处理领域的一把好手。Python提供了很多开源工具,可以帮助我们轻松完成各种图像处理任务。本文将介绍几种可用于图像处理的Python工具。一、PillowPillow是Python图像处理领域......
  • 深度学习在图像识别领域还有哪些应用?
    深度学习在图像识别领域的应用非常广泛,除了之前提到的图像分类、目标检测、语义分割和图像生成,还有其他一些应用。图像超分辨率重建:深度学习技术可以用于提高图像的分辨率,例如通过使用生成对抗网络(GAN)和变分自编码器(VAE)等技术,可以将低分辨率的图像转换为高分辨率的图像,从而提高......
  • ICLR2023 | 用于图像复原的基础二值卷积单元
    前言 本文分享ICLR2023论文BasicBinaryConvolutionUnitForBinarizedImageRestorationNetwork ,介绍用于图像复原的基础二值卷积单元。本文转载自我爱计算机视觉仅用于学术分享,若侵权请联系删除欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结、最新技术跟踪、......
  • 水果识别系统Python+TensorFlow+卷积神经网络算法【图像识别】
    引言随着科技的发展,我们生活中的各种便利工具日益增加。例如,你有没有想过,当你在超市里看到一个陌生的水果,却不知道它是什么名字时,有一个工具可以帮你识别出来?今天,我要为大家介绍一种基于Python的水果识别系统。这个系统不仅识别准确,还具有友好的用户界面。下面,让我们一起探索这个......
  • Topaz DeNoise AI:智能图像降噪的终极解决方案 Mac+win
    TopazDeNoiseAI是一款功能强大的智能图像降噪软件,它利用最新的人工智能技术来消除图像中的噪声和干扰,为您带来更清晰、更生动的图像效果。无论您是专业摄影师还是普通用户,TopazDeNoiseAI都能够满足您对图像质量的需求。→→↓↓载TopazDeNoiseAImac/win版TopazDeNoise......
  • 用简单Prompt生成高质量图像
    随着技术的不断发展,人工智能领域也在不断创新和突破。其中,图像生成技术已经成为了人工智能领域中的一颗璀璨明星。在过去的几年中,文生图技术取得了长足的进步,但是也存在着一些问题,最为常见的就是生成的图像质量不高,以及所需的文生图Prompt往往冗长且难以编写。但是,随着LLM增强扩散......
  • opencv 图像处理方法汇总
      Qt的简单使用:https://www.cnblogs.com/carsonzhu/p/10815654.html一个案例:图像处理仿真平台https://blog.csdn.net/qq_37340229/article/details/128685044该系统主要针对医学超声图像进行处理,基本涵盖了医学图像处理的经典处理方法,有图像增强、图像滤波、边缘检测、......
  • 动态展示缩放背景图
          有时候在渲染用户上传的图片时,需要根据不同图片宽高进行展示,若固定宽高,则会对图片一定程度的拉伸,导致图片变形,此时直接根据relation 相对位置,使图片的框和背景框动态缩放,宽则同宽,长则同长,直接上效果图           .srcbox-i......