跨域獲取圖片並自行上傳儲存

涉及點：

1. 跨域 CORS 協議

   1. 為什麼使用cors,不使用jsonp？因為cors更強大，方便安全，還不需要修改大量的前後端資料格式，只需修改伺服器配置引數，與請求引數。

   2. 想要跨域獲取資料與資源，必須由對方伺服器開啟 CORS 協議，通過認證或公開獲取資料與資源。

      • HTTP訪問控制（CORS）

   3. ajax跨域請求時，需要手動開啟，跨區請求引數：crossDomain: true

      $.ajax({
          beforeSend : function (xhr) {
          },
          error      : function () {
          },
          crossDomain: true,
          method     : "GET",
          url        : URL,
          dataType   : "json",
          timeout    : 3000
      })
       
      

2. 例項與常用型別轉換

• 主要思路：首先通過Image物件下載圖片，然後通過canvas物件，轉換成需要的型別，最後進行儲存。

  • ==跨域獲取的重要引數==：crossOrigin= "anonymous"，下面是例項:

    var img = new Image();
    img.src = url;
    // 跨域重點引數
    img.crossOrigin = "Anonymous";
    img.onload = function () {
        // 壓縮質量可以根據實際情況調整
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
    
        // 設定 canvas 的寬度和高度
        canvas.width = this.width;
        canvas.height = this.height;
    
        // 把圖片繪製到 canvas 中
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    
        // 取出 Blob 格式資料, 併發送
        canvas.toBlob(function (blod) {
    
            var fd = new FormData();
            fd.append('key',blod);
            var request = new XMLHttpRequest();
            request.open("POST", URL);
            request.send(fd);
    
        },'image/jpeg');
    };
     
    

    • 啟用了 CORS 的圖片

• 基本常用轉變方法整理

  • 通過 url路徑，返回image物件

    function UrlToImage (url,fn){
      var img = new Image();
      img.src = url;
      img.onload = function(){
        fn(img);
      }
    };
    

  • 將image物件轉變為canvas型別

    function ImageToCanvas(image){
      var cvs = document.createElement("canvas");
      var ctx = cvs.getContext('2d');
      cvs.width = image.width;
      cvs.height = image.height;
      ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
      return cvs ;
    };
     
    

  • 將canvas物件轉變為blob型別物件，blob()方法非常強大。

    function CanvasResizeToFile(canvas,quality,fn){
      canvas.toBlob(function(blob) {
        fn(blob);
      },'image/jpeg',quality);
    };
    

    • ​ File 介面基於 Blob ，繼承了 Blob 的功能並將其擴充套件使其支援使用者系統上的檔案。我們可以把它當做File型別對待，其他更具體的用法可以參考MDN文件
    • MDN文件 Blob()

  • 將canvas物件轉變為dataUrl字串

    function CanvasResizeToDataURL(canvas,quality){
      return canvas.toDataURL('image/jpeg',quality);
    };
    

  • 將flie(blob)型別轉變為dataUrl字串

    function FileToDataURL(file,fn){
      var reader = new FileReader();
      reader.onloadend = function(e){
        fn(e.target.result);
      };
      reader.readAsDataURL(file);
    };
    

  • 將dataUrl字串轉變為image型別物件

    function DataUrlToImage(dataurl,fn){
      var img = new Image();
      img.onload = function() {
        fn(img);
      };
      img.src = dataurl;
    };
    

  • 將dataUrl字串轉變為blob型別物件

    function DataUrlToFile(dataurl) {
      var 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 Blob([u8arr], {type:mime});
    };
    

1. 資料上傳與儲存

   1. 使用FormData方法包裝資料，支援blob型別，File 介面基於 Blob。

      var fd = new FormData();
      fd.append('indexKey',blod);
      

   2. 使用xhr上傳

      var request = new XMLHttpRequest();
      request.open("POST", Url);
      request.send(fd);
      

參考資料

1. cors 相關
   • 啟用了 CORS 的圖片
   • CORS settings attributes
   • HTTP訪問控制（CORS）
2. Blob 相關
   • MDN文件 Blob()
3. 其他相關
   • 其他部落格