canvas跨域完美解決，微信頭像解決跨域

如今前端技術發展的愈來愈快，不少圖片合成這種耗費服務器性能的，均可以移動到前端進行了合成了。並且合成很方便，咱們利用 canvas 能夠實現好多東西。

自動打算利用前端來合成圖片，在網上就找到了 html2canvas，你們能夠試試，很簡單。

前端 canvas 常常會遇到 『圖片跨域』 的問題。

項目中，最典型的例子是：
將微信頭像，經過 canvas 來合成圖片

以前的作法一直是，將微信頭像保存下來，能夠存儲到目錄，和用戶 id 相關的命名。我是直接獲取圖片的 base64 存儲到了數據庫，原理同樣。

今天偶爾看到一篇文章，使用了 nginx 代理。我是對運維方面很是差，好多東西不沒用過，試了下，可用，很是好！記錄下來：

location ^~ /wechat_image/ {
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-   Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
    proxy_pass http://thirdwx.qlogo.cn/;
}

意思是：
    當咱們訪問本身項目域名的 '/wechat_image/' 下的文件，會代理爲 'http://thirdwx.qlogo.cn/' 域名。

    例如：
        微信頭像是：
            http://thirdwx.qlogo.cn/mmopen/2jvVWBbFLSUwQFzfrv0FblezRqvwN8oQRA2lwolqoCKfASiarKiaibkrglsp6FCxxPdaicKeUs6KVeyPPicgGWXySXsUiaITgM7PPT/132

        咱們在項目中使用的圖片url爲：
            http://網站域名/wechat_image/mmopen/2jvVWBbFLSUwQFzfrv0FblezRqvwN8oQRA2lwolqoCKfASiarKiaibkrglsp6FCxxPdaicKeUs6KVeyPPicgGWXySXsUiaITgM7PPT/132

參考文章：
https://blog.csdn.net/mengruobaobao/article/details/79164793

---

做者：beyond__devil
來源：CSDN
原文：https://blog.csdn.net/beyond__devil/article/details/82467358
版權聲明：本文爲博主原創文章，轉載請附上博文連接！