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

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

涉及點：

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. 其他相關
   • 其他博客