一、前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错。本篇先不管到底有用与否,仅仅记录理论知识。也希望大家一起来分享实战经验啊! 二、从HTTP URI Scheme入手 对于 HTTP URI
前言 偶尔加入一个网安群的时候,入群题目是这个: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQuSURBVHhe7ZptmoMgDIR7rh6o5+lpvEwP01XUGshAokgX+8z+7PKRTF6SoN7e/KMCnSlw68wemkMF3oSSEHSnAKHsLiQ0i
2)客户端通过OpenUrl调起Safari,再二次跳转到data url 技术实现方案是首先通过调起Safari,然后跳到一个Data URI Scheme形式下的HTML页面,而添加到主屏幕的也是这个Data URI Scheme形式下的HTML页面。 OpenUrl调起Safari的实现为: [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"http:www.xxx.com"]]; 通过该方法即可调起Safari,让Safari访问附带的URL链接,在该功能实现中,URL链接指向一个Data URI Scheme形式下的HTML页面。如下图所示:
2015年,我们在青云平台上实现了“百度云观测”应用。青云应用本质上是一个iframe,在向iframe服务方发送的请求中会携带一些数据,青云平台会使用Base64 URL对这些数据进行编码,其提供的编码解码算法示例如下:
HTML5学堂:谷歌于2010年推出的新一代图片格式 —— WEBP,随着移动互联网的发展,WEBP格式在2015年逐渐的开始被大公司部分采用。本文主要除了比较WEBP与JPG等传统格式的图片之外,还介绍了如何转换WEBP格式图片以及具体开发时的用法。 使用WEBP图片的目的 保证图片质量的前提下缩小图片体积。JPEG、PNG以及GIF这些格式的图片已经没有太大的优化空间。但是,WebP图片格式给图片优化提供了另一种可能 图片压缩 无损压缩的图片格式 TIFF;GIF;RAW;PCX;TAG;PNG;BMP
方法一: new fileReader().readAsDataURL(file) 方法二: var imgCanvas=document.createElement('canvas'); mgContext=imgCanvas.getContext('2d'); var imgAsDataURL=imgCanvas.toDataURL("image/jpeg"); 缺点 就是任何图片都被png了 编码出来的字符串大小可能要比原图编码出来的要大 demo 可以在控制台运行
那么这是什么呢?这是Data URI scheme。 Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了。 在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
Data URI是一个富有争议的特性。即使在最有经验的前端开发者眼中,也会形成对 data URI 截然不同的看法:有人认为它是性能优化神器,有人认为它已经落后于时代。为什么会这样?本文带你进行深入的剖析。 URI,不是URL 我们习惯的 URL 的全称是统一资源定位符(uniform resource locator),它是由一个“协议”和一个“地址”组成。协议告诉浏览器或者程序用何种方式去获取这个资源,地址告诉程序在哪里找到这个资源,每个地址都能唯一定位一个公开资源(比如图片、HTML、JavaScri
该文介绍了如何用css实现未知宽度的正方形,其中一种是利用图片的等比例缩放,另一种是利用padding的百分比值基于父容器宽度的特性。这些方法都可以使容器在未知宽度的情况下充满整个视口。
参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html
有很多高大上的网站中都有这一做法。尤其是在登录页面,输入用户名和密码时加入小图标,看起来简单舒服。
现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,在谷歌浏览器中就会显示这样
本文由腾讯云+社区自动同步,原文地址 https://stackoverflow.club/article/json_transfer_strange_stuff/
用PS打开图片,点击点击“文件”——“存储为Web所用格式”将图片存储为Web所用格式,点击“存储”。
前端开发过程中会接触各种各样的编码,比较常见的主要是UTF-8和HTML实体编码,但是web前端的世界却不止这两种编码,而且编码的选择也会造成一定的问题,如前后端开发过程中不同编码的兼容、多字节编码可能会造成的XSS漏洞等。因此,本文旨在更好的全面了解涉及前端开发领域的字符编码,避免可能出现的交互和开发中的忽视的漏洞。 ---- URL编码 我曾经在URL编码解码和base64一文中讲述了URL编码中的三组函数,并对比了这三组函数与base64编码的关系,在此简要说明一下。 escape/unescape
作 者 牛志恒,腾讯互娱开发工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处。 WeTest 导读 本篇包含了XSS漏洞攻击及防御详细介绍,包括漏洞基础、XSS基础、编码基础、XSS Payload、XSS攻击防御。 第一部分:漏洞攻防基础知识 XSS属于漏洞攻防,我们要研究它就要了解这个领域的一些行话,这样才好沟通交流。同时我建立了一个简易的攻击模型用于XSS漏洞学习。 1. 漏洞术语 了解一些简单术语就好。 VUL Vulnerability漏洞,指能对系统造成损坏或能借之攻
HTML5 启动模板 当启动一个新的项目的时候,你需要一个启动模板。这里是一个简洁干净的模板,可以作为 HTML5 项目的基础。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title>
定义 webp是由谷歌推出的新一代图片格式,在压缩方面比当前JPEG格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,派生自图像编码格式VP8.以BSD授权条款发布。 优点 在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%。 根据Google较早的测试,WebP的无损压缩比网络上找到的PNG文件少了45%的文件大小,即使这些PNG文件在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小 缺点 编解码速度偏慢 目前WEBP与JPG相比较,编码速度慢10倍
SMTP 是 Simple Mail Transfer Protocol 的简称,即简单邮件传输协议,是发送协议。 它定义了一组从源地址到目的地址传输邮件的规范,并支持在传送过程中通过不同网络主机实现中转及传送。
阅读目录 GIF(Graphics Interchange Format) PNG(Portable Network Graphics) JPG(Joint Photographic Experts Group) base64 APNG GIF/PNG/JPG/WEBP/APNG都是属于位图(位图 ,务必区别于矢量图); GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和
领取专属 10元无门槛券
手把手带您无忧上云