如何將一個外鏈圖片保存到本身的服務器？

簡介

最近一直在開發一款雲筆記產品，產品上線後有用戶反饋，但願咱們提供一個瀏覽器插件使其能快速收集素材。通過討論以後，我決定開發一款能爲用戶提供快速蒐集文字、圖片功能的瀏覽器插件。在開發的過程當中，遇到了保存圖片的問題。假如咱們僅僅是將該圖片的連接保存，那麼到了咱們的筆記以後，因爲圖片連接存在防盜鏈，則會出現圖片加載失敗的問題。所以，在前端須要將該圖片下載並上傳至咱們的服務器，而後將新的圖片連接保存到筆記中。在開發過程當中遇到了一點點的小麻煩，因而記錄以下。

responseType的問題

一開始，在使用ajax下載圖片時，我首先將responseType設置爲blob。responseType的意思是返回響應數據的類型，可選值有不少，例如：arraybuffer、blob、document、json、text等，即我但願返回給個人是一個blob格式的圖片。但事與願違，從別人家的服務器下載東西，你不能期望人家就按照你想要的格式來返回，因而在此碰壁，經過該方式我僅僅拿到了一個字符串，沒法將其轉爲File格式上傳。因而我轉變思路，再也不使用ajax下載，轉而使用Image對象來加載圖片。

Image

代碼以下：

let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
   let canvas = document.createElement("canvas");
   canvas.width = image.width;
   canvas.height = image.height;
   let context = canvas.getContext("2d");
   context.drawImage(image, 0, 0, image.width, image.height);
   let url = canvas.toDataURL("image/png"); //獲得圖片的base64編碼數據
   let file = dataURLtoFile(url,'test.png');
   // 上傳本身的服務器
   uploadToServer(file);
 };
 image.src = info.srcUrl;
複製代碼

首先建立一個Image實例，併爲該實例設置onload方法，即圖片下載完成後執行的方法。該方法是將下載好的圖片繪製到Canvas，並將Canvas轉爲base64，完成圖片轉base64的過程。轉爲base64後，就能夠轉爲File格式的二進制流上傳服務器啦。base64轉File的代碼以下：

function dataURLtoFile(dataurl, filename) {
  //將base64轉換爲文件
  let arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {
    type: mime
  });
}
複製代碼

上傳完成後就能夠拿到該圖片在本身服務器上的連接了。外鏈圖片上傳至本身的服務器更方便咱們來管理用戶的圖片，也保證用戶查看圖片信息的穩定性。