html最簡單的Gif圖動畫製作方法gif轉base64

雲棲大講堂發表於2018-06-19
HTML動畫

html 最簡單的Gif圖動畫製作方法 gif轉base64

  1. 將圖片轉化為base64編碼格式，網站有很多，比如：http://tool.css-js.com/base64.html操作也簡單-

  2. 得到這麼一串，就是base64編碼格式的圖片了

  3. <script>

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

img.src=‘這兒就是複製填寫上面那一大串’；//給img容器引入base64的圖片

</scirpt>

3.最後一步：

document.body.appendChild(img)；//將img容器新增到html的節點中就行了

效果如下：

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..." />
原文釋出時間：2018-6-19
原文作者：帥帥狗
本文來源csdn部落格如需轉載請緊急聯絡作者


相關文章