获取远程图片的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()
}