crossOrigin属性解决canvas图片getImageData跨域

2018年02月10日 by 张 鑫旭 阅读 679 次, 今日 25 次

对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。

那有没有什么办法可以解决这个问题呢?

阅读全文…

CORS ajax跨域请求php简单完整案例一则

2018年02月9日 by 张 鑫旭 阅读 1306 次, 今日 38 次

CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取。

比较常见的应用之一就是Ajax跨域请求数据。

阅读全文…

canvas文本绘制自动换行、字间距、竖排等实现

2018年02月5日 by 张 鑫旭 阅读 2254 次, 今日 33 次

和CSS相比,SVG以及canvas对文字排版的支持很弱。

在CSS中天然支持的文本自动换行,其他letter-sapcing字间距,writing-mode竖排等都是一个CSS属性就可以实现。但是在canvas中,全部都不支持。

但是canvas可以方便把文字转换成图片,有些场合,例如广告生成工具就需要canvas前端图片生成,此时我们该如何处理这些文字排版呢?

阅读全文…

小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

2018年02月2日 by 张 鑫旭 阅读 2451 次, 今日 30 次

对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。

尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。

那么该如何实现呢?

阅读全文…

小tips: 纯CSS显示JS/HTML等源代码行数

2018年02月1日 by 张 鑫旭 阅读 2206 次, 今日 29 次

如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。

阅读全文…

CSS改变插入光标颜色caret-color简介及其它变色方法

2018年01月28日 by 张 鑫旭 阅读 2381 次, 今日 18 次

有这样一个需求,改变输入光标的颜色,同时不改变输入框文字原本的颜色,在以前,如果产品经理提这样的需求,多半都会被开发一板子打过去。而如今,实际上已经有了天然针对此需求的属性caret-color。同时本文还会介绍其他一些改变光标颜色不改变文字颜色方法。希望本文能够对你的学习有所帮助。

阅读全文…

CSS :focus-within伪类选择器及纯CSS下拉等应用举例

2018年01月21日 by 张 鑫旭 阅读 3548 次, 今日 20 次

:focus-within伪类原本设计的作用是原生表单元素focus时候,祖先<form>元素可以也有状态变化。

但是在我看来,:focus-within功能之强悍,远远不是仅仅和祖先<form>元素玩过家家这么简单。

理论上,只要页面上任意一个元素focus,通过:focus-within就能对页面上任意的元素进行样式控制…

阅读全文…

借助HTML5 details,summary无JS实现各种交互效果

2018年01月15日 by 张 鑫旭 阅读 5997 次, 今日 24 次

HTML5 details, summary这两个标签元素内置交互行为,我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然,前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。

阅读全文…

瞎折腾:把JS,CSS任意文本文件加密成一张图片

2017年12月24日 by 张 鑫旭 阅读 9657 次, 今日 28 次

周末在家就是应该放松的,我的放松手段很简单,就是学习前端知识,写写文章,抽个时间去钓鱼,完美。

本文内容就是一个临时起意的折腾,一个对JS,CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片,以及如何解密等。

希望本文的内容对您的学习有所帮助。

阅读全文…

小tips: 0学习成本实现HTML元素粘滞融合效果

2017年12月21日 by 张 鑫旭 阅读 8230 次, 今日 24 次

元素粘滞融合效果很酷,看上去很难实现,实际上实现却非常容易,几乎0学习成本,一起来看看究竟吧!

阅读全文…