獲取遠程圖片的Blob資源

原文地址：http://www.cnblogs.com/JimmyBright/p/7681092.html 

思路：js獲取遠程資源的blob會涉及到跨域的問題，所以需要中轉一下，具體是使用php的curl獲取 

    /**
     * @desc 轉發獲取圖片防止前端跨域取不到資源
     * @author Jimmy
     * @date 2017-10-13
     */
    public function actionGetimage()
    {
        header("Content-Type:image");
        $url = $this->getParam('url');
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 500);
        curl_setopt($curl, CURLOPT_URL, $url);
        $res = curl_exec($curl);
        curl_close($curl);
        echo $res;
    }

JS里可以在utils里定義個公用方法 action為Yii框架里對應的action路徑，fileUrl為一個靜態的遠程網絡圖片

//獲取跨域的文件Blob格式
function getRemoteImageBlob(action, fileUrl, callBack) {
  let host = store.state.APIURL
  let url = host + action + "?url=" + fileUrl
  let xhr = new XMLHttpRequest()
  xhr.open("GET", url)
  xhr.responseType = "blob"
  xhr.onload = () => {
    callBack(xhr.response)
  }
  xhr.send()
}