文章关键字 ‘foreignObject’

纯CSS图片滤镜项目CSSgram简介

2019年06月7日,星期五

CSSGram项目封面图

本文介绍一个CSS项目CSSgram,借助css滤镜和混合模式实现Instagram中的26种滤镜效果,不仅可以作用于图片,还可以作用于视频。

阅读全文…

CSS滤镜和混合模式处理的图片如何上传下载?

2019年04月20日,星期六

CSS处理图形合成真图像

使用CSS滤镜和混合模式可以实现很多很酷的图像处理效果,但是处理后的美图用户无法下载,也无法上传,因为此时的图片资源还是原图,有没有什么方法可以得到CSS技术处理后的图像呢?

阅读全文…

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

2018年02月5日,星期一

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

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

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

阅读全文…

SVG <foreignObject>简介与截图等应用

2017年08月4日,星期五

SVG图形表现非常给力,但是对于纯粹的文本展示却很吃力,例如希望文字到边缘可以自动换行,结果SVG却很难做到,对于XHTML而言这可以说是天生的理所当然的特性,那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢,有,那就是SVG的<foreignObject>元素!

阅读全文…

图片动态局部毛玻璃模糊效果的实现

2015年02月5日,星期四

本文内容如题,图片动态局部毛玻璃模糊效果的实现,有图有文有码有实战,更有尔康亲临助阵,希望本文的内容能够对您的学习有所帮助。

阅读全文…