分类 coding 下的文章

不是第一次弄这个东西,一套流程下来觉得步骤还是有点繁琐,所以备忘一下。

需求

设计网页的时候常会用到一些非系统自带的字体,要实现的做法不外乎以下几种

  1. 把所有艺术字体部分作为图片素材处理
  2. 在CSS中引用外部的自定义 ttf字体库文件
  3. 提着菜刀找产品经理和设计师,让他们把字体改回用宋体(笑)

无论1或是2,都有比较明显的缺点。
作为图片处理的话,每次出现一个小改动比如说需要改动个别文字,那就得打开PS重新做一个图片素材,而且网页加载图片展现效果和对带宽的利用都不甚理想。
外挂ttf字库的话浪费带宽流量的问题则更为严重,如果是西文字库还好(也就十几个符号和大小写52个字母)中文的话字库文件通常2M起步,整套粗细斜字库像阿里普惠体一共30M+。用户手机打开你的页面单单为了显示文字就不见30M流量是不实际的,如果同时来一千几百个用户,服务器更是会因为带宽堵塞直接扑街。

那有没有好的解决方案,有!把项目需要用到的字提取出来重新打包成一个定制化的字库文件,也就是做TTF压缩。

啰嗦科普完,下面开干。内容分上下两篇

不知道是不是业内还有其他更专业更成熟更快捷傻瓜高效优雅的方法,以下仅仅是自己的一点摸索罢了。



- 阅读剩余部分 -

微信公众号导出的文章统计数据xlsx 文档结构如下。需要用到的数据第6行起,第1列是标题及链接,第3列是发表日期。
php方式解构excel文档已经做过了,最近都是拿python练手,顺便就试试在py中完成这个任务

excel导出公众号数据.png

下文无特别说明是python3.x代码,需要跳过弯路看正确解决方案的的直接跳到最后方案


- 阅读剩余部分 -

项目中有个功能需求,对部分图像的浏览做鉴权。未授权前能粗略分辨照片但又要保证原图不被下载保护私隐。虽然一行CSS也可能做到模糊效果,但这种处理手法手略懂前端知识的人可以轻易绕过。所以比较慎重的做法还是后端先对图像预先处理。

把需求进一步简单推理概括的话,就是给图像加上马赛克或做模糊处理。脑子里有个2个比较相似方案。

方案1. 对图像加工(缩小)成仅满足前端显示需要的尺寸,对全图加马赛克处理;
方案2. 对图像加工成更小(大约60x60)的小缩略图,在前端做拉伸覆盖显示,像素在浏览器端拉扯成马赛克(我还真是个逻辑鬼才)

原图(blog做了resize):

org.jpg

方案一加马赛克:

DSC02514.1.JPG

方案二缩小成图标大小再拉伸平铺

构思初步成型,顺便也来比较一下两种做法的处理效率。


- 阅读剩余部分 -

少量中文通过GET方式传参,到了PHP端解码出现乱码或内容丢失。
原因及解决办法

url参数会对 编码字串内的 + 号解释为空格,所以在 decode 之前做一下逆操作就可以解决。

$str_b64 = $_GET["msg"]; //base64编码的字符串
$str_b64 = str_replace(" ","+",$str_b64);
$str_raw = base64_decode($str_b64); //解码

最近摸索前端canvas画布和后端图像加工相关的一些功能。写了个练手程序,为了让前端(js控制css)预览的体验与后端php图像处理一致。总结了几点经验。

先上成品,表情包生成器:
https://gen8.orz.com.cn/mymeme
QQ截图20191227142153.png

img11.jpg

*此文并非系统且科普的教学,讲述的内容基于我个人备忘比较跳跃和零散。

目标:

  1. 用户上传模板图
  2. 在图上画出一个录入文字的涂鸦区域(定义尺寸、位置、文字大小、角度),并可以预览效果
  3. 保存成方案,之后可以打开与分享这个方案。把输入的文字(段子)合成到图片上
  4. 根据涂鸦区域的大小与文字的多与少,一定范围内自动调节文字的大小(未做更换字体、颜色)

这几个目标遇到问题较多的是预览前端的涂鸦区预览 与 后端生成图片的一致性。



- 阅读剩余部分 -