如何使用canvas生成含有微信头像的邀请海报没有微信头像问题-创新互联
这篇文章主要介绍了如何使用canvas生成含有微信头像的邀请海报没有微信头像问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联专注于祥云企业网站建设,成都响应式网站建设,商城开发。祥云网站建设公司,为祥云等地区提供建站服务。全流程按需策划设计,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资料,得出解决思路,用canvas将页面绘制生成图片,
问题:canvas 图片跨域。
解决过程(填坑历程):
1.从网上存在如图解决办法 img.crossOrigin = "" (专业采坑,数年)。亲测无效。很是不解。
2.网上也存在后端服务解决
设置header头,或者nginx 服务配置等 允许访问。但是,存在问题(图片大部分为了优化,都会存放在第三方cdn.上面。这是第三方的配置,是否允许,自己很难控制)
3.解决办法:采用所有图片路径,转化为base64流来处理。图片存为本地图片。这也可以就避开了跨域问题。
最后个人解决方法:没有采用第3种保存本地,这样会增加本地图片,而且会存在本地跟微信端没有同步更新的问题,不是用户新的头像。个人是采用远程下载后直接绘制输出图片,这样图片就变成本地图片,解决canvas绘制图片不支持跨域问题。
wxheadimg.aspx 页面代码:
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绘制代码也顺便弄出来:
页面代码 :
jpg.shareBox{position:relative} .shareBox .copyImage{position:absolute;top:0px;left:0px;z-index:999;opacity:0;height:666px;width:666px;}
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用canvas生成含有微信头像的邀请海报没有微信头像问题”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!
当前文章:如何使用canvas生成含有微信头像的邀请海报没有微信头像问题-创新互联
分享路径:http://myzitong.com/article/dhsecs.html