记项目中png/jpg图片文字模糊之svg解决要点

png/jpg的logo图片中文字部分放大后，会出现模糊。至于为什么不直接使用大图，是因为项目中图片是嵌入在td中，直接使用大图会撑大td，当然可能有些人建议使用CSS transform:scale(1)来缩小图片，再调整td大小，我没尝试过，不知是否可行。主要是我的应用场景是在打印中使用logo，不是在页面静态中使用，涉及打印时动态加载及打印页面放大问题。

解决方案：使用SVG图片格式, png/jpg转换为svg在线地址 https://www.bejson.com/convert/image_to_svg/

注意问题：不能直接使用出现模糊的png/jpg文件来转换SVG,需要使用放大后不会模糊的png/jpg图片来进行转换

实际html中要求的尺寸大小： width: 104;height: 23;

当时用来转换的jpg大小：800*176；

转换步骤：1.上传图片

2.更改大小

3.保存成svg

使用时，请注意，svg的实际大小是800*176，但内容区域为104*23，其余为空白，需要隐藏掉；我的做法是在外面多加一层div，并设置固定大小及超出隐藏，参考代码如下

<td  ><div style="width: 104;height: 23;overflow: hidden;"><img alt="" src="${basePath}/static/images/logo.svg" ></div></td>

记项目中png/jpg图片文字模糊之svg解决要点相关推荐

transform: scale() 图片文字模糊的原因
今天做一个刮刮乐H5应用的时候,用到了个简单的 CSS 动画效果,就是使用缩放transform: scale(.1) 从小变大弹出获奖窗口,以及按钮重复变大变小的动画,结果遇到个很郁闷的问题,按钮和 ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
Eclipse导入的项目中的中文都是乱码，如何解决？
Eclipse导入的项目中的中文都是乱码,如何解决? eclipse之所以会出现乱码问题是因为eclipse编辑器选择的编码规则是可变的.一般默认都是UTF-8或者GBK,当从外部导入的一个工程时,如 ...
在设计电机电路项目中总结的一些电机参数知识和设计要点 - 直流电机、空心杯电机、步进电机、伺服电机等
在设计电机电路项目中总结的一些电机参数知识和设计要点,供参考一.直流电机 1.直流电机内阻.转速.扭矩的关系: *内阻主要指线圈的匝数决定,匝数越大,内阻越大: *内阻越小,工作时消耗的电流越大,同 ...
Vue项目中设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...
JAVA项目中如何实现图片上传？
JAVA项目中实现图片上传 **前端div** <div class="layui-form-item"><label class="layui-for ...
android图片缓存,直接应用项目中的Android图片缓存技术
前不久搞的Android图片缓存,刚开始引入开源的框架,用着还行,但是在开发中遇到问题,就比如universal-image-loader-1.9.5.jar这个框架吧,在加载图片的时候自定义imag ...
java 读取项目内图片,java web项目中读取本地图片
在项目中,因为业务需要,用户上传的图片存放在服务器的D盘中,为了读取并显示到页面上,尝试了两种方法: 一通过流读取 java代码: @RequestMapping(value = "/s ...

记项目中png/jpg图片文字模糊之svg解决要点

记项目中png/jpg图片文字模糊之svg解决要点相关推荐

最新文章

热门文章