canvas跨域完美解决,微信头像解决跨域

20 篇文章 0 订阅
现在前端技术发展的越来越快,很多图片合成这种耗费服务器性能的,都可以移动到前端进行了合成了。而且合成很方便,我们利用 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

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值