公告:由于博客https升级,原博客引用http链接失效,预览及部分图片效果请查看源代码!

记录一下js光标位置及复制和剪切板

前言

关于光标位置,copy与剪切板等,博客中总结的比较少,翻了一下,很久之前做编辑器的时候,有类似文字javascript获取iframe中光标所在位置的父节点名称,但是和今天总结的这个还不太一样。由于项目中用到在input某个光标之后动态插入宏,用到了光标位置。在这里记录一下。

光标位置后插入

其实光标位置后插入,我的做法是很简单的,就一句话。vue版本如下:

JS十六进制颜色(#fff)与RGB, HSL颜色的相互转换

前言

今天做了这个需求,就是前端支持rgba设置,但是后台生成图片的时候不支持rgba,需要2个值。分别是一个十六进制颜色值和一个opacity透明度,这就要我这边传值的时候,把原来的rgba转换成2个值,然后传给后台。(注,之所以前端没有分成2个字段,是因为前端设置颜色的时候直接用一个rgba设置的,这样用户体验好,分别设置颜色和透明度的话,还要分2次,对用户来说稍微有点麻烦。)

转换方法

转换方法其实网上搜索也能搜索到,这里暂时列一下:

rgb转为十六进制颜色

网页中添加特殊字体解决方案

前言

今天总结一下网页中添加特殊字体的解决方案。一个字体一般情况下很大,少则1-2M,一般是4-6M,大的字体十几兆的都有。加载在网页中会导致速度变得很慢,因此,你在网页中很少看到有用特殊字体的原因。今天主要总结一下网页中运用特殊字体的一些解决方案。

方案一:(针对有针对性的展示,死的文字)

目前市面上有很多字体压缩的方案,但是都是提供了具体的字体库,也就是你网页中用的文字,都在字体库里面,不在里面则网页中就不会展示。

FileReader获取上传图片的宽高

前言

input upload 图片上传,经常要判断上传图片的宽高。除了运用一些上传插件可以获取。原生的上传方式也可以获取,下面就说一下如何获取上传图片的宽高。

以饿了么上传插件为例