前端如何不变形的渲染图片大小和图片上的内容

在做前端项目时可能经常会页面图片大小变形或者压缩的情况,一般情况就是height100%widthauto就可以了满足大部分使用情况了。有时候需要做一些比较复杂的功能,比如需要在图片上增加锚点,而且图片在适配各种屏幕大小时,锚点在图片上的位置相对不变,先看看需要实现的效果,如下图:
在这里插入图片描述
比如上图上有一个锚点鼠标附上去会展示关键文字,对图片上进行解释;这个蓝点的位置是在后台设置的相关位置,可以改到任何位置展示,要如何实现这个功能呢?

首先我们分析,图上的点位置是相对于图片的位置进行定位的,那就按照在图片上的百分比展示位置就可以了,下面我们来看看实现的核心代码:

// 锚点的js文件.vue
<template><el-tooltip class="item" effect="light" :content="infoData.pointBody" placement="bottom" :key="uuid()"><div class="anchor-list" v-if="infoData.pointEnabled && infoData.xaxis" :style="[anchorStyle]"></div></el-tooltip>
</template><script>
import { uuid } from '@/utils'
export default {props: {imageSrc: {type: String,default: '',},infoData: {type: Object,default: () => ({}),},},data () {return {anchorStyle: {},};},watch: {infoData (val) {if (val) this.getImageAttr(this.imageSrc);},},mounted() {this.getImageAttr(this.imageSrc)},methods: {uuid,getImageAttr (src) {if (src) {const img = new Image();img.src = src;img.onload = () => {const imageWidth = img.width;const imageHeight = img.height;this.anchorStyle = {borderColor: this.infoData.pointColor,// px 转化为百分比,减去原点自身大小一半,以圆心为平移点top: `calc(${((this.infoData.yaxis) / imageHeight) * 100}% - 10px)`,left: `calc(${((this.infoData.xaxis) / imageWidth) * 100}% - 10px)`,};};}},},
};
</script><style lang="scss" scoped>
.anchor-list {height: 20px;width: 20px;border-radius: 50%;position: absolute;z-index: 2;border: 5px solid;
}
</style>

可以看到上面有一个比较核心的地方,就是const img = new Image(),就是创建了一个JS中的Image对象,通过操作Image对象,拿到图片的原始长宽然后转化为相对位置的百分比,然后把相对位置的百分比赋值给元素样式;现在就不管页面里的图片大小怎么展示,图上的点都是相对不变的。

通过创建JS对象可以解决很多实际情况中的问题,比如动态给图片赋值宽高,而使图片不会变形。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/177626.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Revit AddIn问题:无法运行外部运行程序“xxxxx“,请与供应商联系以获取帮助,供应商提供给Revit的身份信息为:xxxxxx

1.在二次开发的时候遇到的问题如下 2.参考的&#xff1a; Revit插件加载&#xff0c;addin文件的设置_不存在与应用程序附加模块对应的名称节点-CSDN博客 3.我的解决 确实是路径“C:\ProgramData\Autodesk\Revit\Addins\2018”下的AddIn文件出问题了。因为我安装了2019版本然…

okhttp post请求 header post参数加密遇到的两个问题

如果你对于网络请求用了https后是否还有必要对参数加密有疑问可以看我上篇的文章&#xff1a;网络安全https 记得耐心看完&#xff0c;下面说问题&#xff1a; Caused by: java.lang.IllegalArgumentException: Unexpected char 0x0a 一开始以为是okhttp框架对特殊字符做了现在…

Xray+awvs联动扫描

首先xray开启监听 xray_windows_amd64.exe webscan --listen 127.0.0.1:7777 --html-output xray-xxx.html --plugins sqldet,xxe,upload,brute-force,cmd-injection,struts,thinkphp 然后准备目标csv文件,每行一个url或ip然后加个逗号 接着awvs导入csv 对导进来的每个目…

Umijs项目优化

首先通过npm run analyze 查看打包后的文件进行观察&#xff0c;哪些包的体积大&#xff0c;然后分解开 体积较大的文件:echarts、wangeditor、antd、moment.js package.json 文件配置 .umirc.ts配置文件 1. 分包配置 通过 webpack-chain 的 API 修改 webpack 配置。 chunk…

【Unity ShaderGraph】| 快速制作一个 抖动效果

前言 【Unity ShaderGraph】| 快速制作一个 抖动效果一、效果展示二、UV抖动效果三、应用实例 前言 本文将使用ShaderGraph制作一个抖动效果&#xff0c;可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章&#xff1a;【Unity ShaderGraph】| Shader Gr…

Linux系统编程,socket通信编程实践练习(C语言)

文章目录 Linux系统编程&#xff0c;socket通信编程实践练习&#xff08;C语言&#xff09;1.服务端代码2.客户端代码 Linux系统编程&#xff0c;socket通信编程实践练习&#xff08;C语言&#xff09; 1.服务端代码 #include <stdio.h> #include <stdlib.h> #in…

Maven Repository使用

1.Maven Repository网站 https://mvnrepository.com/https://mvnrepository.com/ 2.查询需要的依赖 3.参考例子 <!-- https://mvnrepository.com/artifact/org.freeswitch.esl.client/org.freeswitch.esl.client --> <dependency> <groupId>org.freesw…

【c++|opencv】一、基础操作---3.访问图像元素

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 访问图像元素 1. 访问图像像素 1.1 访问某像素 //灰度图像&#xff1a; image.at<uchar>(j, i) //j为行数&#xff0c;i为列数 //BGR彩色图像 i…

智慧矿山:AI算法在带式运输机中的异物识别应用

随着现代农业和工业的发展&#xff0c;带式运输机在各种生产作业中发挥着越来越重要的作用。然而&#xff0c;在带式运输机运行过程中&#xff0c;可能会混入各种异物&#xff0c;这些异物的存在可能会对运输过程和设备本身造成损害。为了解决这一问题&#xff0c;本文将介绍一…

[PHP]pearProject协作系统 v2.8.14 前后端

pearProject是一款轻量级的在线项目/任务协作系统&#xff0c;远程办公协作。 概述 PearProject 不支持 IE8 及以下版本&#xff0c;建议使用基于Webkit内核的现代浏览器访问 PearProject 为前后端分离架构&#xff0c;因此安装分为后端和前端两大部分&#xff0c;需要分别进…

Kafka、RabbitMQ、RocketMQ中间件的对比

消息中间件现在有不少&#xff0c;网上很多文章都对其做过对比&#xff0c;在这我对其做进一步总结与整理。 RocketMQ 淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件&#xff0c;使用Mysql作为消息存储媒介&#xff0c;可完全水平扩容&#xff0c;为了进一步降低成…

SolidWorks2019安装教程(正版)

网盘资源附文末 一.简介 SolidWorks软件是世界上第一个基于Windows开发的三维CAD系统&#xff0c;由于技术创新符合CAD技术的发展潮流和趋势&#xff0c;SolidWorks公司于两年间成为CAD/CAM产业中获利最高的公司。良好的财务状况和用户支持使得SolidWorks每年都有数十乃至数百…

前端实验(一)单页面应用的创建

实验目的 掌握使用vite创建vue3单页面程序命令熟悉所创建程序的组织结构熟悉单页面程序运行原理能够编写简单的单页面程序 实验内容 创建一个名为vue-demo的单页面程序编写简单的单页面程序页面运行单页面程序 实验步骤 使用vite创建单页面程序 创建项目名为目录vue-demo的…

基于nodejs+vue啄木鸟便民维修网站设计与实现

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

Spring-创建非懒加载的单例Bean源码

补充&#xff1a;关于扫描的逻辑 /*** Scan the class path for candidate components.* param basePackage the package to check for annotated classes* return a corresponding Set of autodetected bean definitions*/ public Set<BeanDefinition> findCandidateCo…

HarmonyOS(二)—— 初识ArkTS开发语言(中)之ArkTS的由来和演进

前言 在上一篇文章HarmonyOS&#xff08;二&#xff09;—— 初识ArkTS开发语言&#xff08;上&#xff09;之TypeScript入门&#xff0c;我初识了TypeScript相关知识点&#xff0c;也知道ArkTS是华为基于TypeScript发展演化而来。 从最初的基础的逻辑交互能力&#xff0c;到…

SSE(SeverSideEvent)服务端推送技术

SSE应用场景1&#xff1a; ChatGPT的打字效果&#xff1a; 可以看到ChatGPT的输出是逐字输出的打字效果&#xff0c;这里应用到了SSE&#xff08;SeverSideEvent&#xff09;服务端推送的技术。一个SSE服务的Chrome开发工具化network截图 &#xff1a; SSE原理 HTTP 服务器…

java反射API

反射 什么是Java的动态机制什么是反射机制什么是Class类Class提供了诸多的get方法 反射机制实例化对象Class提供了一个方法 Constructor类指定构造器实例化对象 Method类获取一个类中的所有方法Class类提供了对应的方法 获取本类自定义的所有方法Class类提供了对应的方法 获取表…

RabbitMQ 运维 扩展

1、集群管理与配置 1.1、集群搭建 关于Rabbitmq 集群的搭建&#xff0c;详见以下文章。简单说来就是将多个单机rabbitmq服务&#xff0c;通过给到一致的密钥&#xff08;.erlang.cookie&#xff09;并且开放rabbitmq服务的 25672 端口&#xff0c;允许多节点间进行互相通讯&am…

基于单片机设计的太阳能跟踪器

一、前言 随着对可再生能源的需求不断增长&#xff0c;太阳能作为一种清洁、可持续的能源形式&#xff0c;受到越来越多的关注和应用。太阳能光板通常固定在一个固定的角度上&#xff0c;这限制了它们对太阳光的接收效率。为了充分利用太阳能资源&#xff0c;提高太阳能光板的…