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

最新推荐文章于 2022-08-29 19:18:53 发布

weixin_30672019

最新推荐文章于 2022-08-29 19:18:53 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

文章标签：前端运维数据库 ViewUI

原文链接：http://www.cnblogs.com/blueoceansky/p/10424370.html

本文介绍如何利用前端技术进行图片合成，并解决canvas合成图片时遇到的跨域问题。通过html2canvas库简化合成过程，同时使用nginx代理解决微信头像等资源的跨域访问限制，提供了一个实用的跨域配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在前端技术发展的越来越快，很多图片合成这种耗费服务器性能的，都可以移动到前端进行了合成了。而且合成很方便，我们利用 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.youkuaiyun.com/mengruobaobao/article/details/79164793

作者：beyond__devil
来源：优快云
原文：https://blog.youkuaiyun.com/beyond__devil/article/details/82467358
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/blueoceansky/p/10424370.html