html 最简单的Gif图动画制作方法 gif转base64

html 最简单的Gif图动画制作方法 gif转base64

  1. 将图片转化为base64编码格式,网站有很多,比如:http://tool.css-js.com/base64.html操作也简单-html 最简单的Gif图动画制作方法 gif转base64


  2. 得到这么一串,就是base64编码格式的图片了html 最简单的Gif图动画制作方法 gif转base64

  3. <script>

var img = new Image();//创建img容器

img.src=‘这儿就是复制填写上面那一大串’;//给img容器引入base64的图片

</scirpt>

3.最后一步:

document.body.appendChild(img);//将img容器添加到html的节点中就行了

效果如下:

html 最简单的Gif图动画制作方法 gif转base64

DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少 HTTP 请求,加快小图像的加载时间。 经过Base64 编码后的文件体积一般比源文件大 30% 左右。
// Base64 在CSS中的使用
.box{
  background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />