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
版权声明:本文为博主原创文章,转载请附上博文链接!
canvas跨域完美解决,微信头像解决跨域的更多相关文章
- 麒麟子Cocos Creator实用技巧一:如何正确地显示微信头像
不管是游戏App,还是H5,又或者是微信小游戏.但凡接入了微信登录的应用,都可能需要显示微信头像. 在Cocos Creator中,我们常见的显示方法像下面这样 var headimg = 'http ...
- HTML-在canvas画图中,图片的线上链接已配置允许跨域后,仍然出错提示跨域,怎么解决?
这个问题我已经遇到了2次,第一次解决了后,第二次又遇到了,所以这次做个笔记,怕以后再次遇到 举例: 1.要实现的问题:我需要在canvas画布上画上我的微信头像 2.后台配置已经完成了允许我头像地址的 ...
- 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...
- [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法
原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...
- 跨域的小小总结:js跨域及跨域的几种解决方法
一.什么是跨域?? js跨域请求就是使用js访问iframe里的不同域名下的页面内容,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同的域的iframe框架中的数据.即只要域名.协议. ...
- Springboot中关于跨域问题的一种解决方法
前后端分离开发中,跨域问题是很常见的一种问题.本文主要是解决 springboot 项目跨域访问的一种方法,其他 javaweb 项目也可参考. 1.首先要了解什么是跨域 由于前后端分离开发中前端页面 ...
- 2019-03-26 SpringBoot项目部署遇到跨域问题,记录一下解决历程
近期SpringBoot项目部署遇到跨域问题,记录一下解决历程. 要严格限制,允许哪些域名访问,在application.properties文件里添加配置,配置名可以自己起: cors.allowe ...
随机推荐
- 使用Git和Github来管理自己的代码和笔记
一.Github注册 1.先注册github.com的账号,官方网站: https://github.com/ 2.登录 3.创建仓库,仓库分公开的和私有的,公开的是免费的,私有的是收费的.我现在创建 ...
- 数据库基础之Mysql
数据库的简介 数据库 数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合.数据库中的数据按一定的数学模型组织.描述和存储,具有较小的冗余,较高的数据独立性和易扩展性, ...
- 字符串format格式方式
1.format后面都是个元组类型!!! 不一一对应则报错,比如少了一个替换的元素,format可以少但是不能多,一多就会报错 括号里可以加索引,看例2 可以用索引只取一个值,比如括号里都是{1} r ...
- java面试-反射
1.什么是反射?有什么优缺点? 反射就是动态加载对象,并对对象进行剖析.在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法.对于任意一个对象,都能够调用它的任意一个方法.这种动态获取信 ...
- 20191024-2 Alpha阶段贡献分配
此作要求参见: https://edu.cnblogs.com/campus/nenu/2019fall/homework/9858 要求1 每位组员的贡献分值 罗杨美慧:9 徐丽君:11 魏鑫:12 ...
- Web基础了解版11-Ajax-JSON
Ajax AJAX即“Asynchronous Javascript And XML”:是,不发生页面跳转.异步请求载入内容并改写局部页面内容的技术. 也可以简单的理解为通过JS向服务器发送请求. ...
- java基础之----分布式事务tcc
最近研究了一下分布式事务框架,ttc,总体感觉还可以,当然前提条件下是你要会使用这个框架.下面分层次讲,尽量让想学习的同学读了这篇文章能加以操作运用.我不想废话,直接上干货. 一.什么是tcc?干什么 ...
- [技术翻译]Web网页内容是如何影响电池使用寿命的?
本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...
- 15.Python文本转化语音方法
1.用pywin32模块来将文本转化为语音 通过pip install pywin32安装模块,pywin32是个万金油的模块,太多的场景使用到它,但在文本转语音上,它却是个青铜玩家,简单无脑但效果不 ...
- Python3-Selenium自动化测试框架(二)之selenium使用和元素定位
Selenium自动化测试框架(二)之selenium使用和元素定位 (一)selenium的简单使用 1.导包 from selenium import webdriver 2.初始化浏览器 # 驱 ...