本地圖片如何生成url

一、使用base64

一般情況下，本地圖片是需要上傳到服務器之後才能讓web頁面訪問的。但是如果圖片較小，可以使用base64將圖片轉換成編碼後的字符串，直接將字符串嵌入到HTML或CSS中，這樣可以節省一次HTTP請求。以下是一個示例代碼：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">

以上代碼中的“data:image/png;base64,”部分表示圖片的格式，可以根據實際情況進行調整。由於base64字符串較長，如果需要多次使用建議封裝成函數或變量。

二、使用file協議

在某些情況下，我們需要在本地環境下使用圖片，比如在開發調試過程中，可以直接使用file協議訪問本地圖片。以下是一個示例代碼：

<img src="file:///C:/Users/xxx/Desktop/picture.png">

以上代碼中的路徑可以根據實際情況進行調整，需要注意的是，在使用file協議時需要將本地文件路徑轉換成URL編碼格式。

三、使用服務器代理

在實際開發中，我們往往需要使用遠端服務器上的圖片資源。但是，如果圖片資源未授權公開訪問，就無法直接通過URL進行訪問。這時可以使用代理技術，先將需要訪問的圖片資源下載到本地服務器，最終用戶訪問的是本地服務器上的圖片鏈接。以下是一個示例代碼：

function getProxyUrl(url) {
  var proxyUrl = 'http://localhost/proxy.php?url=' + encodeURIComponent(url);
  return proxyUrl;
}

var imgUrl = 'https://example.com/img/picture.jpg';
var proxyUrl = getProxyUrl(imgUrl);

var img = new Image();
img.src = proxyUrl;
document.body.appendChild(img);

以上代碼中，getProxyUrl函數會將需要訪問的圖片URL作為參數，拼接成代理服務器的URL，並進行URL編碼。在實際中，需要在服務器上部署proxy.php文件，並將proxyUrl作為Image標籤的src屬性。

四、使用URL.createObjectURL

URL.createObjectURL方法可以將本地文件轉換成Blob URL（類似於http協議）。這個URL只在當前會話（窗口）中有效，並且當關閉頁面時自動釋放。以下是一個示例代碼：

var input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  var file = input.files[0];
  var url = URL.createObjectURL(file);
  var img = new Image();
  img.onload = function() {
    URL.revokeObjectURL(url);
  };
  img.src = url;
  document.body.appendChild(img);
});

以上代碼中，input元素監聽了“change”事件，當用戶選擇文件之後，會使用URL.createObjectURL將文件轉換成Blob URL，然後將URL嵌入到Image標籤中，同樣的，在圖片加截完成後，使用URL.revokeObjectURL釋放URL。

五、使用canvas

使用canvas可以將本地圖片繪製成圖像，並將其轉換成DataURL。以下是一個示例代碼：

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
  console.log(dataURL);
};
img.src = 'picture.jpg';

以上代碼中，首先創建一個Image對象，監聽load事件。load事件中創建了canvas元素和2d上下文對象，設置其寬高，並將圖片繪製到其中，最終使用canvas.toDataURL將其轉換為DataURL。