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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！