首页
学习
活动
专区
圈层
工具
发布

白夜追凶 :手 Q 图片的显示和发送逻辑

一层层看代码,整理总结了手q中图片的显示和发送逻辑,以及对透明通道图片的特殊处理。 一、黑背景?白背景?...很容易就能发现两个场景处理图片的不同:快捷发图栏将png图片获取为bitmap,再压缩成jpeg,这个过程直接忽略了透明通道,android默认处理的结果就是一张黑色背景的jpeg。...快捷发图栏所有图片的字节流持久化到同一个文件里,这样做的目的是下次从本地加载多张图片时,会共用同一个文件IO,提高加载效率; AIO中的缩略图也是由原图压缩成jpeg,在处理的代码中,我发现了人为加白色背景的逻辑...有两个怀疑方向:1、png压缩成jpeg的过程,丢失透明通道导致AIO中这张图片为黑色背景;2、有没有可能是在canvas上绘制白色背景失败导致的该问题?...P2是质量压缩png生成的jpeg,已经丢失透明通道,是一张黑色背景的图。即使在P4加上白色背景也被上层图层覆盖,我们看到的就是黑色骰子缩略图。 我之前分析的过程中忽略了压缩原始图片生成P2这一步。

2.3K20

前端切图-PhotoShop软件使用教程(png+jpg格式图片)

命名文件名 “格式“——仅限图像 在“切片”那里,可以选择是存储全部切片还是只存储选中的切片, 一般默认就存储全部切片就好了,有时候只需要一小块切片时,可以选择存储选中的切片,他会只保存一张你当前切得图...二、切PNG图 切透明图的核心理念是,你要把不需要的背景图给隐藏掉,只让需要的留下来,底部背景变成像马赛克那样的样式。 1.打开ps拖进来你要切的psd或者tif文件, 一定得是带图层的。...格式都没问题, 但是到了选择保存位置这个对话框里,选择的是“保存所有切片“, 最后保存出来的图片,只有最后切得那张或者说切片工具选中的那张是png的,其他就都存成jpg格式了,背景是白色底 !!...所以切png的图,还是建议,一张一张“保存选中切片”比较好。 或者你的图标与白色底差别大的话,你也可以不计较,让他保存成jpg后再去ps中魔棒抠图也好,不过这样比较麻烦不是。...这个方法可能只能保存一个图标, 有的人说我好几个图:例如文字+图片都有咋弄? 那就切图呗! 那还要纠结的话那就合并图层吧!

2.1K100
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    PS-前端切图教程(切jpg图和切png图)

    一般默认就存储全部切片就好了,有时候只需要一小块切片时,可以选择存储选中的切片,他会只保存一张你当前切得图,这样省的自己去一大堆切片中捡出来自己要用的了。...二、切PNG图 切透明图的核心理念是,你要把不需要的背景图给隐藏掉,只让需要的留下来,底部背景变成像马赛克那样的样式。 ? 1.打开ps拖进来你要切的psd或者tif文件, 一定得是带图层的。...“保存所有切片“, 最后保存出来的图片,只有最后切得那张或者说切片工具选中的那张是png的,其他就都存成jpg格式了,背景是白色底 !!...所以切png的图,还是建议,一张一张“保存选中切片”比较好。 或者你的图标与白色底差别大的话,你也可以不计较,让他保存成jpg后再去ps中魔棒抠图也好,不过这样比较麻烦不是。...这个方法可能只能保存一个图标, 有的人说我好几个图:例如文字+图片都有咋弄? 那就切图呗! 那还要纠结的话那就合并图层吧!

    17.1K50

    微信小程序 | 全局配置和页面配置

    如何设置全局及页面的背景颜色? 在我们制作一个微信小程序时,首先进行全局配置,设置底部索引,我们可能面临不知道如何插入图标或是图标尺寸过大的情况。...除此之外,我们会想让页面并不只是单调的白色而想设置不同颜色。...图1 图标文件夹 在全局配置中,增加一个tabBar标签,并在这个标签里面写关于底部的图标和文字等内容。...图2 全局显示效果 (2)页面配置 页面插入图片需要一个image标签,而要让图片下的文字和图片都居中,可以让图片和文字都在同一个view标签里面,然后通过wxss来设置样式。...图3 图文居中效果图 结语 在添加图标或图片时,直接将其拖动到小程序开发工具里的img文件夹下是不可以的,需要在复制到电脑里的存放小程序文件的文件夹里的img文件夹。

    1.5K30

    成为优秀UI设计师,必须了解的UI设计规范

    1.png 特别是对于新人,所以大家一起来看看图标设计的规范吧: 1  像素对齐 需要严格的做到像素对齐,尤其是在做较小尺寸的图标时,如果不严格的遵循像素对齐,那最终的显示效果就会出现问题。...通用切片命名格式: 组件_类别_功能_状态@2x.png 举例:tabbar_icon_home_default@2x.png(对应中文:标签栏_图标_主页_默认@2x.png) 模块特有切图命名规则:...模块_类别_功能_状态@2x.png 举例:mail_icon_search_pressed@2x.png(对应的中文为:邮件_图标_搜索_默认@2x.png) 我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称...2  图片细节处理 1)图片精度不够(这里所说的精度不是说DPI分辨率需要300哦,那是做高精度印刷输出时才需要的,而在电脑及手机上的图片DPI分辨率为72即可,另外输出图片时需适当压缩一下图片的大小)...2)图片尺寸建议统一为偶数值,方便前端技术人员开发。 3)图片边缘避免与白色背景融合,可以在边缘位置加色。 4)为了配合标题字体,图片可以局部调亮或调暗。

    1.4K40

    PPT辅助Power BIExcel设计:异形饼图

    所以要求上方的图片只能有线条,而不能有背景色。 读者可能会想到,在网上找一些无背景的PNG素材或许可行。pngimg.com有海量的图片,我们找一张苹果logo看看效果。 哇,似乎接近了答案。...苹果的颜色是无色,为了将底层的饼图显示出来;苹果的外面、圆的里面填充颜色,为了遮盖底层饼图多余的部分。 使用PPT的合并形状功能可以完美达到以上目的,接下来正式开始操作。...以下是阿里的素材库网站: https://www.iconfont.cn/ 需要强调的是,下载格式一定选择SVG,而不是PNG。...因为PNG看上去是线条(如上方pngimg提供的苹果logo),但实际上是一个矩形,你的异形饼图需要的图案是不规则的,而不是一个框。SVG图形的本质是线条的组合,所以可以使用。 2....全选图案,在合并形状下选择拆分。 可以看到图片分成了三个部分。苹果的两部分和圆圈。 苹果的形状填充选择无颜色,圆圈的形状填充颜色取决于你的Power BI底纹颜色,如果是白色,则选择白色。

    1.9K50

    前端性能优化篇二:图片的合理使用

    使用场景 JPG 适用于呈现色彩丰富的图片,在我们日常开发中,JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。...但实践当中,为了规避体积的问题,我们一般不用PNG去处理较复杂的图像。当我们遇到适合 PNG 的场景时,也会优先选择更为小巧的 PNG-8。...5 base64 关键字:文本文件,依赖编码,小图标的解决方案 前言知识 雪碧图 雪碧图、CSS 精灵、CSS Sprites、图像精灵,说的都是这个东西——一种将小图标和背景图像合并到一张图片上,然后利用...CSS 的背景定位来显示其中的每一部分的技术。...和雪碧图一样,Base64 图片的出现,也是为了减少加载网页图片时对服务器的请求次数,从而提升网页性能。Base64 是作为雪碧图的补充而存在的。

    1.8K30

    Fdog系列(四):使用Qt框架模仿QQ实现登录界面,界面篇。

    自定义标题,隐藏任务栏标题,实现系统托盘显示 3. 美化主界面,文本框的奇思妙想 4. 实现背景阴影 ---- 一....如果你给按钮添加了图标,但是是像关闭按钮那样后面有白色的话,可以选中按钮属性中的autoRaise,勾选一下,你就会发现背景透明了。...实现背景阴影 到目前为止,还剩下最后一个问题,当使用自带的标题栏后,窗口是自带阴影边框的,但是当我们取消了系统自带的标题栏之后,边框也随之消失,如何自己搞一个边框阴影?...创建一个透明图层,然后再创建一个白色图层,边框要小于透明图层,给白色图层设置图层样式,投影里面,参数如下: ? ? 后面放了一个白色背景方便观察。...然后保存为png图,记得把后面白色图层隐藏,再说一遍要注意透明图层和阴影图层的距离, ?

    5.4K52

    浅谈性能优化之图片压缩、加载和格式选择

    缺陷 JPG 的有损压缩在 轮播图 和 背景图 的展示上确实很难看出破绽,但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时,人为压缩导致的 图片模糊 会相当明显。...业务场景 JPG 适用于呈现色彩丰富的图片,在我们日常开发中,JPG 图片经常作为大的 背景图、轮播图或 预览图 出现。打开某电商网站首页,即可看到大图片的处理几乎都是使用了 JPG。...缺点 体积太大 业务场景 理论上来说,当你追求最佳的显示效果(详情展示图、图片有放大需求、摄影作品等),并且不在意存储大小或所需带宽时,可以使用 PNG-24。...但实践当中,为了避免文件体积过大的问题,我们一般不用 PNG 去处理较复杂的图像。当我们遇到适合 PNG 的场景时,也会优先选择更为小巧的 PNG-8 。...当我们临时想替换一张图片时,也需要重新打包并发布上线,非常麻烦。 当我们将图片进行 OSS 放置并 CDN 加速后,这个问题就得到了很好的解决。

    1.3K10

    颜色、网页颜色与网页安全色

    如纯红色表示为(255,0,0),十六进制表示为#FF0000。按这种表达方式,理论上我们可以得到256*256*256=16777216种颜色。 网页中颜色的表示方式。...网页设计中,利用CSS指定颜色有四种表达方式: 1、使用十六进制方式,取值范围 #000000 ~ #FFFFFF (黑色到白色)。...Netscape的安全色表从白色开始,以黑色结束。 ? 微软的色表与Netscape不同,其从黑色开始,以白色结束。...在处理透明背景色的图片时,网页安全色特别重要! 4.2 PNG格式 只有支持PNG格式的浏览器中才能使用。 4.3 JPEG格式 支持16.8M种颜色。 支持无损压缩和有损压缩。...但是,对于页面中的主要文字区域或者背景的颜色,我们最好要选用网页安全色,避免发生悲剧。

    5K20

    html背景图片的设置宽高_网页的背景图片怎么设置

    1.背景图片的插入方法 行内样式插入背景图:PNG);”> 在css样式表中引入背景图 注意:设置背景图片的元素一定要有具体的宽度和高度,否则会导致背景图片无法显示 2.背景图相关属性的设置 2.1 background-size...(4)space: 容器空间小于图片时,背景图不会产生缩放,会被裁切 容器空间大于图片时,在不缩放的前提下尽可能多的重复图片 当容器空间大于图片时: div{ width...5)round: 容器空间小于图片时,缩放背景图至容器大小(非等比例缩放) 容器空间大于图片时,随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像....padding: 50px; box-sizing: border-box; } 通过上述效果图可以看出来,边框下是有背景图的。

    6.3K10

    小谈PNG转SVG的方法 在线转换网站与illustrator

    前提我想说,SVG格式适用于如LOGO、图标这类颜色并不多的图,颜色太鲜艳图还是谨慎为好。...这时无敌的illustrator已经把普通jpg/png转换成了矢量图。但还有一个问题,就是仔细观察的话,这个图是有白色背景的。如果你恰好需要这个背景那太好了,否则我们必须把这个背景弄掉。 3....展开高级,方法选择第一个“临接(创建木刻路径)”,选项勾选“忽略白色”,看图就明白了: 这时拖到外侧看一下图片背景,没了就对了。如果还有,我没招了。 5....前提我想说,SVG格式适用于如LOGO、图标这类颜色并不多的图,颜色太鲜艳图还是谨慎为好。...这时无敌的illustrator已经把普通jpg/png转换成了矢量图。但还有一个问题,就是仔细观察的话,这个图是有白色背景的。如果你恰好需要这个背景那太好了,否则我们必须把这个背景弄掉。 3.

    4.6K20

    circos 可视化手册- images 篇

    包含以下几个属性 dir dir指定生成的图片的目录,.代表当前目录 file file指定生成的图片的名字,默认为circos.png png png指定生成的图片的格式,yes代表生成png格式的图片...background.white.conf文件只有一行内容 background = white 指定生成的图片的背景色,可以看到这里为白色,所以默认生成的图片背景色都为白色。...此时image的相关配置就是系统默认配置,当我们想要改变其中某项默认配置时,比如修改背景色为黑色,需要使用*操作符,示例如下 ? 在想要修改的参数后面添加*, 然后重新赋值即可。...对于background, 有两点需要注意 1.背景色可以设置成透明 写法如下 background = transparent 2.背景除了可以是颜色之外,也可以是另外一幅图 写法如下: background...= background.png 要求背景图片的格式必须为png,而且大小必须和输出图片的大小完全一致。

    1.1K20

    ps切图必知必会

    ,所有空白区域填充白色 Gif:支持透明,不支持半透明 PNG8:支持透明,不支持半透明 png24:支持透明,也支持半透明 如何抹掉psd原文件或者图片的文字 方法一:使用矩形框工具,在空白区选一个区域...IE浏览器按住Alt键+鼠标点击一下图片 控制台调试工具的Source下的image,可以进行抠图 合成雪壁图(css sprite) 意义:把页面上的很多小图合并成一张图,利用背景定位的技术实现,减少...http请求,当然有的小图标,如果用字体图标也是可以的,这样比背景图还要好 方法一:新建一个画布,然后依次的将所扣出的图标复制粘贴到新的图层即可(复制粘贴的图标,要把背景色去掉为透明背景) 方法二:新建一个画布...40px; } .check{ border:1px solid blue; background-position:-194px -39px; } 当我们发现,有重复的代码时,可以合并抽取代码.../png)特点 JPG/GIF/PNG的应用 如何抹掉psd原文件或者图片的文字 添加前景色和删除背景色 如何在网页中抠图 合成雪壁图(css sprite) 使用雪碧图结合定位嵌入到网页中去

    4.2K20

    性能优化——图片压缩、加载和格式选择

    缺陷 JPG 的有损压缩在轮播图和背景图的展示上确实很难看出破绽,但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显。...业务场景 JPG 适用于呈现色彩丰富的图片,在我们日常开发中,JPG 图片经常作为大的背景图、轮播图或 预览图出现。打开某电商网站首页,即可看到大图片的处理几乎都是使用了 JPG。...缺点 体积太大 业务场景 理论上来说,当你追求最佳的显示效果(详情展示图、图片有放大需求、摄影作品等),并且不在意存储大小或所需带宽时,可以使用 PNG-24 (https://baike.baidu.com...但实践当中,为了避免文件体积过大的问题,我们一般不用 PNG 去处理较复杂的图像。当我们遇到适合 PNG 的场景时,也会优先选择更为小巧的 PNG-8 。...当我们临时想替换一张图片时,也需要重新打包并发布上线,非常麻烦。 当我们将图片进行 OSS 放置并 CDN 加速后,这个问题就得到了很好的解决。

    1.4K50

    常用图片格式

    good.gif 4、png 网页制作及日常使用比较普遍的图像格式。 优点:无损压缩,图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。 缺点:不能制作成动画 ?...---- 位图和矢量图 位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。上面讲的5种图像都属于位图。...svg 目前首选的网页矢量图格式。 优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。 缺点:色彩不够丰富。 ? flash 退出历史的重量级网页矢量图格式。...1、使用大幅面图片时,如果要使用不透明背景的图片,就使用jpg图片;如果要使用透明或者半透明背景的图片,就使用png图片; 2、使用小幅面图片或者图标图片时,如果图片含多种颜色,可以使用gif或png图片...;如果图片是单色,而且要求有很好的显示效果,可以使用svg;如果是图片时动画的,可以使用gif。

    2.2K40

    手把手:扫描图片又大又不清晰?这个Python小程序帮你搞定!

    可这个最常用的方法却无法正确区分下面的几个颜色: 下表展示了每种颜色与背景色的欧几里德距离: 从表中可以看出,笔记反面渗过来的深灰色应该被分为背景色,但它与白色背景的差值要比粉红色的差值更大,而粉红色应该是前景色...圆柱体的中心轴从底部的黑色、中间的灰色渐变到顶部的白色——整个轴的饱和度(saturation)为0,外圆周上鲜艳的颜色饱和度都为1。...选择一组有代表性的颜色 当我们将前景色分离后,会得到与页面上笔记的颜色相对应的一组颜色。...该程序最终会将多个压缩后的图像合并为一个PDF文件,就像使用ImageMagick的转换工具一样。...: 由three.js提供支持的交互式三维图 最后这个PDF来自于工程师的方格纸,在这个过程中我将亮度阈值设置为0.05,因为背景和线条之间的对比度非常低: 对应的颜色簇: 由three.js提供支持的交互式三维图

    2.1K20

    全栈之前端 | 9.CSS3基础知识之图像元素样式学习

    /media/examples/lizard.png"); /* 顶部 */ weiyigeek.top-多个背景与渐变图 background-repeat 属性 - 设置背景图像重复方式 描述...区域为参考 元素背景demo3,背景可重复显示,背景图片的摆放以 padding 区域为参考 元素背景demo4,背景可重复显示,背景图片的摆放两边以 content 、padding区域为参考 body {margin...multiply: 最终颜色为顶层颜色与底层颜色相乘的结果。 如果叠加黑色层,则最终层必为黑色层,叠加白色层不会造成变化。 其效果类似于在透明薄膜上重叠印刷的两个图像。...前景如果是背景的反色,会得到白色(fully lit color,完全亮起的颜色,应当为白色)。 此混合模式类似于 screen,但是,前景只需要和背景的反色一样亮,最终图像就会变为全白。

    1.6K10

    如何优雅的从网络加载点九图?

    如何处理从网络加载点九的图 我们开发Android应用的时候,当需要适配可拉伸的背景,我们会使用.9.png的图。通常我们是放在res目录下的,这种方式我们很容易做到。...1 背景 1.1 什么是点九图 其实点九图和我们用的其他格式的图没有什么大的不同,只不过是在图片的四周各增加了1px的纯黑(#FF000000)的线进行标记。例如: ?...标记位置 含义 左-黑线 纵向拉伸区域 上-黑线 横向拉伸区域 右-黑线 纵向显示区域 下-黑线 横向显示区域 1.2 Android是如何加载点九图的 当我们将点九图放在res目录下,Android...2 使用方案 2.1 遇到的坑 如果没做任何处理,当我们从服务端直接拉取点九的图设置到我们的view上时,发现图片并不会拉伸,并且图片周围的黑线也会显示出来。...从上1.2Android加载点九图的原理可知,之所以出现这种问题,是因为我们少了编译这一步,是直接拿原始的点九图设置到view上的,所以才出现问题。

    2.6K20
    领券