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

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

最近做了一个微信内访问的H5页面，长按分享图片发送朋友邀请的海报，网上搜索资料，得出解决思路，用canvas将页面绘制生成图片，

问题：canvas 图片跨域。

解决过程（填坑历程）：

1.从网上存在如图解决办法     img.crossOrigin  = ""   （专业采坑，数年）。亲测无效。很是不解。

2.网上也存在后端服务解决

设置header头，或者nginx 服务配置等 允许访问。但是，存在问题（图片大部分为了优化，都会存放在第三方cdn.上面。这是第三方的配置，是否允许，自己很难控制）

3.解决办法：采用所有图片路径，转化为base64流来处理。图片存为本地图片。这也可以就避开了跨域问题。

最后个人解决方法：没有采用第3种保存本地，这样会增加本地图片，而且会存在本地跟微信端没有同步更新的问题，不是用户最新的头像。个人是采用远程-后直接绘制输出图片，这样图片就变成本地图片，解决canvas绘制图片不支持跨域问题。

wxheadimg.aspx 页面代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

if (!string.IsNullOrEmpty(Request.QueryString["data"].ToString()))

{

    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Request.QueryString["data"].ToString());

    request.Timeout = 3000;

    WebResponse response = request.GetResponse();

    Stream stream = response.GetResponseStream();

    Bitmap image = new Bitmap(stream);

    //保存为PNG到内存流 

    MemoryStream ms = new MemoryStream();

    image.Save(ms, ImageFormat.Png);

    //重新输出头像

    Response.BinaryWrite(ms.GetBuffer());

    Response.End();

    ms.Close();

    response.Close();

    stream.Close();

}

canvas绘制页面引用：

canvas绘制代码也顺便弄出来：

页面代码 ：



版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。