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

版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/blueoceansky/p/10424370.html

时间: 2024-09-30 07:29:51

canvas跨域完美解决,微信头像解决跨域的相关文章

麒麟子Cocos Creator实用技巧一:如何正确地显示微信头像

不管是游戏App,还是H5,又或者是微信小游戏.但凡接入了微信登录的应用,都可能需要显示微信头像. 在Cocos Creator中,我们常见的显示方法像下面这样 var headimg = 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132'; cc.loader.load({url:he

解决使用canvas生成含有微信头像的邀请海报没有微信头像

最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资料,得出解决思路,用canvas将页面绘制生成图片, 问题:canvas 图片跨域. 解决过程(填坑历程): 1.从网上存在如图解决办法     img.crossOrigin  = ""   (专业采坑,数年).亲测无效.很是不解. 2.网上也存在后端服务解决 设置header头,或者nginx 服务配置等 允许访问.但是,存在问题(图片大部分为了优化,都会存放在第三方cdn.上面.这是第三方的配置,是否允许

Vue-cli proxyTable 解决开发环境的跨域问题(转)

Vue-cli proxyTable 解决开发环境的跨域问题 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名.今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy

ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法

原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebService方法,总报这个错误,贴图如下: 解决办法: 1.确定你的Silverlight项目及承载Silverlight的Web程序根目录下都包含2个跨域文件,分别是crossdomain.xml和clientaccesspolicy.xml: crossdomain.xml文件,如下: <?xml ve

完美解决微信下拉上拉

转http://note.youdao.com/share/?id=f13df2c846cac5d4f0e24a715d8372a6&type=note#/ 完美解决微信下拉上拉回弹 1.使用jroll.js完美解决,下载jroll.js. 2.DOM结构为: class container 为滑动页面 3.添加css #wrapper { position: absolute; top: 44px; bottom: 0; width: 100%; } 4.编写js <script src=

Vue-cli proxyTable 解决开发环境的跨域问题

Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewrite: { '^/list': '/list' } } } 这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,

Ajax跨域问题的两种解决方法

浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: header('Access-Control-Allow-Origin:*') 使用如下标头可以接受指定网站请求: header('Access-Control-Allow-Origin:http://www.abc.com') 所以,服务器写法: header('Access-Control-Al

解决js获取数据跨域问题,jsonP

网上说了一些jsonp的示例,感觉都没用,最后研究了一下,调用腾讯的一个api.最后要加output=jsonp&callback=?这个,比较适用. var url = "http://apis.map.qq.com/ws/place/v1/search?boundary=nearby(39.908491,116.374328,1000)&keyword=%E6%88%90%E9%83%BD&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

Nodejs代理解决开发环境下跨域问题

前后端分离的项目,需要解决开发环境下跨域的问题: 转载链接:https://www.cnblogs.com/ytu2010dt/p/5959899.html 1.安装node环境 2.新建JS文件:nodeProxy.js 代码: "use strict"; const express = require('express'); const path = require('path'); const app = express(); const request = require('r