前端圖片相關的知識總結

時間  2019-11-17
標籤 前端 圖片 相關 知識 總結 简体版
原文   原文鏈接

圖片的知識分爲三部分javascript

  • html 和 css 對圖片的處理要求
  • js 處理圖片
  • 上傳圖片

1、html 和 css 對圖片處理的要求

這一部分，全是結論性的東西，只說結論。php

  1. 圖片和文字在移動端垂直居中問題（其實跟圖片沒啥關係）

沒什麼特別好結局，話說這跟圖片沒任何關係，爲蛇麼說這個？主要是 ui 驗收，ui 同事會抓中這個問題問😂。其實這個問題是 line-heght 設置，致使文本不居中，沒有什麼特別完美的解決方案。提供參考地址-->前端常見問題——安卓文本沒法垂直居中css

不想看參考地址，能夠直接複製相面代碼，在手機中演示，找到使用最佳的方法，通常是第 7 中。html

<p>一、table 佈局：文本偏上</p>

  <div class="solution" style="display: table; height: 16px;">
    <span style=" display: table-cell; font-size: 10px; vertical-align: middle;">hot 熱門</span>
  </div>

  <p>二、flex 佈局：文本偏上</p>

  <div class="solution" style="display: inline-flex; align-items: center; height: 16px; line-height: 1; font-size: 10px;">
    <span>hot 熱門</span>
  </div>

  <p>三、transform 縮放：文本居中了，可是 transform 不能還原元素在 dom 上的佔用區域大小</p>

  <div class="solution" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
    <span>hot 熱門</span>
  </div>

  <p>四、zoom 縮放：文本偏上</p>

  <div class="solution" style="height: 32px; line-height: 32px; font-size: 20px; zoom: 0.5;">
    <span>hot 熱門</span>
  </div>

  <p>五、固定高度+內邊距+行高設定爲字體大小：文本偏上</p>

  <div class="solution" style="box-sizing: border-box; height: 16px; padding: 3px 0; line-height: 10px; font-size: 10px;">
    <span>hot 熱門</span>
  </div>
  
  <p>六、固定高度+內邊距+行高設爲 normal：文本偏上</p>

  <div class="solution" style="box-sizing: border-box; height: 16px; padding: 3px; line-height: normal; font-size: 10px;">
    <span>hot 熱門</span>
  </div>

  <p>七、內邊距+行高設爲 normal：文本居中，但在部分客戶端上不居中</p>

  <div class="solution" style="box-sizing: border-box; padding: 2px; line-height: normal; font-size: 10px;">
    <span>hot 熱門</span>
  </div>

  <p>八、行高+字體大小設爲 initial：文本居中，在最新的 Chrome 瀏覽器上不居中</p>

  <div class="solution" style="line-height: 16px; font-size: initial;">
    <span style="font-size: 10px;">hot 熱門</span>
  </div>
複製代碼

  1. 雪碧圖，我基本上在遠古時期用過，能夠基於webpack進行配置，但不必這麼作了。前端

  2. 腳手架將小 1kb 的圖片轉成base64，基於webpack配置（腳手架學習一個足，早年使用過gulp，如今直接放棄）。vue

  3. 單頁框架使用 require 或 import 引入圖片，不建議 css 使用。java

2、js 處理圖片

一、base64 和 圖片預覽

複製下列代碼，直接運行靠你demo。用的時候稍微封裝。通常狀況，公司會有 ocr 相關調用。node

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <!-- 上傳圖片 -->
  <input type="file" name="">
  <!-- 圖片預覽 -->
  <img src="" alt="" />
  <script type="text/javascript"> const fileInput = document.querySelector('input') fileInput.addEventListener('change', function (e) { const files = e.target.files const file = files[0] debugger const { name, type, size } = file console.log(` 文件名：${name}\n 文件類型：${type}\n 文件大小：${size} `) // 文件讀取內置對象（構造函數） // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader const reader = new FileReader() if (file) { // 圖片base64 reader.readAsDataURL(file) reader.onload = function (e) { const base64 = reader.result console.log(`base64:${base64}`) // // 利用base64圖片, 預覽圖片 // document.querySelector('img').src = base64 } const imgEl = document.querySelector('img') imgEl.src = createObjectURL(file) imgEl.onload = function (e) { const w = e.target.width const h = e.target.height console.log('經過或是高和寬來驗證圖片的比例:', `${w}:${h}=${w/h}`) } } }, false) // 對象URL 預覽圖片，可不onload事件 function createObjectURL(blob) { if (window.URL) { return window.URL.createObjectURL(blob); } else if (window.webkitURL) { return window.webkitURL.createObjectURL(blob); } else { return null; } } </script>
</body>

</html 複製代碼

二、圖片壓縮

須要說明，前端壓縮圖片會耗時，有必要作一些loading。另一點，前端圖片壓縮，不能指定壓縮存儲大小，這是一坑啊，別被產品忽悠壓縮到2M！webpack

<html> <body> <input id="file" type="file"> <script> var eleFile = document.querySelector('#file'); // 壓縮圖片須要的一些元素和對象 var reader = new FileReader(), img = new Image(); // 選擇的文件對象 var file = null; // 縮放圖片須要的canvas var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // base64地址圖片加載完畢後 img.onload = function () { // 圖片原始尺寸 var originWidth = this.width; var originHeight = this.height; // 最大尺寸限制 var maxWidth = 400, maxHeight = 400; // 目標尺寸 var targetWidth = originWidth, targetHeight = originHeight; // 圖片尺寸超過400x400的限制 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // 更寬，按照寬度限定尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } // canvas對圖片進行縮放 canvas.width = targetWidth; canvas.height = targetHeight; // 清除畫布 context.clearRect(0, 0, targetWidth, targetHeight); // 圖片壓縮 context.drawImage(img, 0, 0, targetWidth, targetHeight); // canvas轉爲blob並上傳 canvas.toBlob(function (blob) { // 圖片ajax上傳 var xhr = new XMLHttpRequest(); // 文件上傳成功 xhr.onreadystatechange = function() { if (xhr.status == 200) { // xhr.responseText就是返回的數據 } }; // 開始上傳 xhr.open("POST", 'upload.php', true); xhr.send(blob); }, file.type || 'image/png'); }; // 文件base64化，以便獲知圖片原始尺寸 reader.onload = function(e) { img.src = e.target.result; }; eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // 選擇的文件是圖片 if (file.type.indexOf("image") == 0) { reader.readAsDataURL(file); } }); </script> </body> 複製代碼

三、圖片懶加載

首先明白一點 http 知識，在同一個會話，被加載過的圖片，不會重複加載。通常使用有現成的庫，如vue的vue-lazy。ios

能夠參考這一篇實現圖片懶加載(lazyload)，這一篇，有點沒講到，懶加載時，會使用佔位圖，等全部接口請求加載完，再加載圖片，這麼作的緣由，是瀏覽器的請求併發數有限，有些圖拼請求耗時，致使 Stalled（請求等待時間） 時間比較久。

<head> <meta charset="UTF-8"> <title>Document</title> <style> img { display: block; margin-bottom: 50px; width: 400px; height: 400px; } </style> </head> <body> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <script> var num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷 lazyload(); //頁面載入完畢加載但是區域內的圖片 window.onscroll = lazyload; function lazyload() { //監聽頁面滾動事件 var seeHeight = document.documentElement.clientHeight; //可見區域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度 for (var i = n; i < num; i++) { if (img[i].offsetTop < seeHeight + scrollTop) { if (img[i].getAttribute("src") == "default.jpg") { img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } } </script> </body> 複製代碼

四、 圖片預加載

3、圖片上傳

這是使用 fetch api 和 axios 上傳圖片。

fetch 上傳圖片

const fileBtn = document.getElementById('file')
const userName = document.getElementById('userName')
fileBtn.addEventListener('change', () => {
  const fd = new FormData()
  fd.append('file', fileBtn.files[0])
  fd.append('userName', userName.value)
  fd.append('age','18')
  fetch('http://localhost:3036/upload', {
    method: 'POST',
    body: fd,
    // headers: {
	  // 'Content-Type': 'multipart/form-data'
    // }
  }).then(res => {
    if(res.ok) {
      console.log('success')
      return res.json();
    } else {
      console.log('網絡錯誤')
    }
  }).then(res => {
    console.log('res is',res);
  })
})
複製代碼

axios 上傳圖片

import axios from 'axios'
 
var file = document.getElementById("upload_file").files[0];
var formdata1=new FormData();// 建立form對象
formdata1.append('img',file,file.name);// 經過append向form對象添加數據,能夠經過append繼續添加數據
//或formdata1.append('img',file);
let config = {
    headers:{'Content-Type':'multipart/form-data'}
};  //添加請求頭
axios.post('/xapi/upimage',formdata1,config).then(response)=>{   
	//這裏的/xapi/upimage爲接口
    console.log(response.data);
})
複製代碼

總結

本文算是前端基礎，不少問題解決都是結論，遇到兩次就知道怎麼解決，並沒特麼好難理解地方。若是不理解，把代碼運行一遍知道，上傳圖片的後端接口，稍微瞭解php或nodejs，開發一個簡單服務。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程