发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

记录-JS简单实现购物车图片局部放大预览效果

悦风兰泰

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
显示全部楼层
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助



一、实现效果


二、代码实现

代码不多，先看一下 HTML 里面结构很简单，初始化 MagnifyingGlass 对象来关联一个 IMG 标签来实现放大。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  8. <body>
  10.     <img id="clothes"  src="https://www.cnblogs.com/./clothes.jpg" alt="">
  12. </body>
  13.    
  16. </html>
复制代码
再看一下 MagnifyingGlass
  1. class MagnifyingGlass {
  3.     // 需要放大的图片
  4.     imgEl
  5.     // 放大预览视图
  6.     magnifyingGlassView
  7.     // 区域小图
  8.     smallCanvas
  9.     // 保存原图的像素值
  10.     originalPiexls = []
  11.     // 截流定时器
  12.     interceptionTimer = null
  14.     constructor(el){
  15.         if(el.tagName == 'IMG'){
  16.             this.imgEl = el
  17.             this.listenerImgLoadSucceeded()
  18.         }
  19.     }
  20.    
  21.     // 监听图片加载完成
  22.     async listenerImgLoadSucceeded(){
  23.         if(!this.imgEl.complete){
  24.             await new Promise((resolve)=>{
  25.             this.imgEl.onload = resolve
  26.         })
  27.     }
  28.    
  29.     // 添加鼠标事件
  30.     this.addMouseEvent()
  31.         // 创建一个放大预览视图
  32.         this.createMagnifyingGlassView()
  33.     }
  35.     // 创建一个放大预览视图
  36.     createMagnifyingGlassView(){
  37.         if(this.magnifyingGlassView){
  38.             this.magnifyingGlassView.remove()
  39.         }
  40.         this.magnifyingGlassView = document.createElement('canvas')
  41.         this.magnifyingGlassView.style.cssText = 'position: fixed;background:aliceblue;left:0;top:0;pointer-events:none;display:none'
  42.         this.magnifyingGlassView.setAttribute('width',`${200}px`)
  43.         this.magnifyingGlassView.setAttribute('height',`${200}px`)
  44.         let body = document.getElementsByTagName('body')[0]
  45.         body.appendChild(this.magnifyingGlassView)
  46.     }
  48.     // 添加鼠标事件
  49.     addMouseEvent(){
  50.         // 添加鼠标滑过事件
  51.         this.addMouseMoveToImageEl()
  52.         // 鼠标滑出事件
  53.         this.addMouseLeaveToImageEl()
  54.     }
  56.     // 添加鼠标滑过事件
  57.     addMouseMoveToImageEl(){
  58.         this.imgEl.onmousemove = (event)=>{
  59.             let x = event.clientX + this.getElementPosition(this.imgEl).left + 20
  60.             let y = event.clientY + this.getElementPosition(this.imgEl).top + 20
  61.             let position = { x, y }
  62.             // 截流
  63.             this.interceptionFunc(()=>{
  64.                 // 修改放大视图位置
  65.                 this.changeMagnifyingGlassViewPosition(position)
  66.                 // 获取需要放大的像素
  67.                 this.getNeedMasgnifyingGlassPiexl({clientX: (event.clientX - this.getElementPosition(this.imgEl).left),clientY: (event.clientY - this.getElementPosition(this.imgEl).top)})
  68.             })
  69.         }
  70.     }
  72.     //截流
  73.     interceptionFunc(cb){
  74.         if(this.interceptionTimer){
  75.             return
  76.         }
  77.         this.interceptionTimer = setTimeout(() => {
  78.             cb()
  79.             this.interceptionTimer = null
  80.         }, 20);
  81.     }
  83.     // 鼠标滑出事件
  84.     addMouseLeaveToImageEl(){
  85.         this.imgEl.onmouseleave = ()=>{
  86.             // 移除放大框
  87.             this.magnifyingGlassView.style.display = 'none'
  88.         }
  89.     }
  91.     // 修改放大视图位置
  92.     changeMagnifyingGlassViewPosition(position){
  93.         this.magnifyingGlassView.style.left = position.x + 'px'
  94.         this.magnifyingGlassView.style.top = position.y + 'px'
  95.         this.magnifyingGlassView.style.display = 'block'
  96.     }
  98.     // 获取元素在屏幕的位置
  99.     getElementPosition(element){
  100.         var top = element.offsetTop
  101.         var left = element.offsetLeft
  102.         var currentParent = element.offsetParent;
  103.         while (currentParent !== null) {
  104.             top += currentParent.offsetTop
  105.             left += currentParent.offsetLeft
  106.             currentParent = currentParent.offsetParent
  107.         }
  108.         return {top,left}
  109.     }
  110.    
  111.     // 保存原像素（操作像素点时候用）
  112.     async getOriginalPiexls(){
  113.         if(this.originalPiexls.length == 0){
  114.             var image = new Image();
  115.             image.src = this.imgEl.src;
  116.             // 等待IMG标签加载完成后保存像素值
  117.             await new Promise((resolve)=>{
  118.                 image.onload = resolve
  119.             })
  120.             let width = image.width
  121.             let height = image.height
  122.             let canvas = document.createElement('canvas')
  123.             canvas.setAttribute('width',`${width}px`)
  124.             canvas.setAttribute('height',`${height}px`)
  125.             var ctx = canvas.getContext("2d")
  126.             ctx.fillStyle = ctx.createPattern(image, 'no-repeat');
  127.             ctx.fillRect(0, 0, width, height);
  128.             try {
  129.                 //保存像素
  130.                 this.originalPiexls = ctx.getImageData(0,0,width,height)
  131.             } catch (error) {
  132.                 console.log(error)
  133.             }
  134.         }
  135.     }
  137.     // 获取需要放大的像素
  138.     async getNeedMasgnifyingGlassPiexl(event){
  139.         //获取原始像素
  140.         this.getOriginalPiexls()
  141.         //如果像素为空，不进行操作
  142.         if(this.originalPiexls.length == 0){
  143.             return
  144.         }
  145.         //获取待放大IMG的宽度，用来计算像素
  146.         let imageWidth = this.imgEl.offsetWidth
  147.         //获取当前鼠标点的范围
  148.         let diffusionLength = 100
  149.         //鼠标触点
  150.         let mouseX = event.clientX
  151.         let mouseY = event.clientY
  152.         //规定区域的上下、左右宽度
  153.         let sepX = parseInt(diffusionLength)
  154.         let sepY = parseInt(diffusionLength)
  155.         // 需要开始的点
  156.         let startPoint = {x:(mouseX - parseInt(sepX / 2.0)),y:(mouseY - parseInt(sepY / 2.0))}
  157.         // 需要结束的点
  158.         let endPoint = {x:(mouseX + parseInt(sepX / 2.0)),y:(mouseY + parseInt(sepY / 2.0))}
  159.         // 最终要展示的像素集合(乘以4是单一像素值宽度)
  160.         let finallyOriginalPiexls = new Uint8ClampedArray(sepX * sepY * 4)
  161.         let currentIndex = 0
  162.         //操作像素
  163.         for(let i = startPoint.y;i < endPoint.y;i++){
  164.             for(let j = startPoint.x; j < endPoint.x;j++){
  165.                 for(let k = 0;k < 4;k++){
  166.                     let index = (i * imageWidth + j) * 4 + k
  167.                     if(index > 0 && index < this.originalPiexls.data.length){
  168.                     // 超过宽度部分需要进行其他色值填充
  169.                     if(j < imageWidth){
  170.                         finallyOriginalPiexls[currentIndex] = this.originalPiexls.data[index]
  171.                     } else {
  172.                         finallyOriginalPiexls[currentIndex] = 199
  173.                     }
  174.                     } else {
  175.                         finallyOriginalPiexls[currentIndex] = 199
  176.                     }
  177.                     currentIndex += 1
  178.                 }
  179.             }
  180.         }
  181.         
  182.         //先绘制一个100*100单位长的小图
  183.         if(!this.smallCanvas){
  184.             this.smallCanvas = document.createElement('canvas')
  185.             this.smallCanvas.setAttribute('width',`${diffusionLength}px`)
  186.             this.smallCanvas.setAttribute('height',`${diffusionLength}px`)
  187.         }
  188.         let smallCtx = this.smallCanvas.getContext("2d")
  189.         //初始化ImageData
  190.         let finallyImageData = new ImageData(finallyOriginalPiexls,sepX,sepY)
  191.         // 当前范围内需要放大的像素
  192.         smallCtx.putImageData(finallyImageData,0,0,0,0,diffusionLength,diffusionLength)
  193.         let url = this.smallCanvas.toDataURL('image/jpeg',1)
  194.         
  195.         //将小图绘制到200*200的预览图上
  196.         var image = new Image();
  197.         image.src = url;
  198.         await new Promise((resolve)=>{
  199.             image.onload = resolve
  200.         })
  201.         var magnifyingGlassCtx = this.magnifyingGlassView.getContext("2d")
  202.         magnifyingGlassCtx.drawImage(image, 0,0,200,200);
  203.     }
  204. }
复制代码
上面的就是全部逻辑，实现方法肯定不是最优的，但是其中可以联想到通过像素点的操作实现任意效果。
三、获取像素信息跨域问题怎么解决？

可以启动一个 node 本地服务，首先见一个包含 index.js 和 package.json 的入口文件的文件夹。
package.json 内容如下：
  1. {
  2.     "name": "youname",
  3.     "version": "1.0.0",
  4.     "description": "description",
  5.     "main": "index.js",
  6.     "scripts": {
  7.     "test": "node ./index.js"
  8.     },
  9.     "author": "wsl",
  10.     "license": "ISC",
  11.     "dependencies": {
  12.         "express": "^4.17.3",
  13.         "express-static": "^1.2.6",
  14.         "http": "^0.0.1-security"
  15.     }
  16. }
复制代码
index.js 内容如下:
  1. var express = require('express')
  2. var app = express()
  3. var http = require('http').Server(app)
  4. //公共页面访问设置
  5. app.use(express.static('www'))
  6. //开启服务
  7. http.listen(3000,function(){
  8.     console.log('开始了')
  9. })
复制代码
终端执行 npm install 后再执行启动服务命令 node ./index.js：
三、获取像素信息跨域问题怎么解决？


注意将前端文件放在目录里 www 文件夹下

这样跨域问题就解决了。
本文转载于:

https://juejin.cn/post/7201437314693906491

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 


来源:https://www.cnblogs.com/smileZAZ/p/17337784.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 执行上下文

下一篇: 执行上下文

发表于 2023-4-20 18:37:13

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4