canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
类别:Web前端 浏览量:1707
时间:2021-10-07 00:44:02 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绘制页面引用:<img src="wxheadimg.aspx?data=headimgurl" />
canvas绘制代码也顺便弄出来:
<script type="text/javascript"> window.onload = function () { var IMAGE_URL; function takeScreenshot(){ var shareContent = document.getElementById('shareMember');//需要截图的包裹的(原生的)DOM 对象 var width = shareContent.offsetWidth; //获取dom 宽度 var height = shareContent.offsetHeight; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点 var scale = 1; //定义任意放大倍数 支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放 canvas.height = height * scale; //定义canvas高度 *缩放 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale //var rect = shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量 //canvas.getContext("2d").translate(-rect.left, -rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位 var opts = { scale:scale, // 添加的scale 参数 canvas:canvas, //自定义 canvas logging: true, //日志开关 width:width, //dom 原始宽度 height:height, //dom 原始高度 backgroundColor: 'transparent', }; html2canvas(shareContent, opts,{useCORS:true,logging:true}).then(function (canvas) { IMAGE_URL = canvas.toDataURL("image/png"); $('.copyImage').attr('src',IMAGE_URL); }) } takeScreenshot(); } </script>
页面代码 :
<li class="shareBox" id="shareMember"> <li class="top"> <li class="logo"><img src="wxheadimg.aspx?data=微信头像网址"/></li> </li> <li class="middle"> <img src="makeQRCode.aspx?data=二维码内容" class="qrcode" /> </li> <img src="" class="copyImage"> </li> jpg.shareBox{position:relative} .shareBox .copyImage{position:absolute;top:0px;left:0px;z-index:999;opacity:0;height:666px;width:666px;}
总结
以上所述是小编给大家介绍的使用canvas生成含有微信头像的邀请海报没有微信头像问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- canvas 裁剪画布(Canvas图片分割效果的实现)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- html判断canvas已经绘制过了(html2canvas截图空白问题的解决)
- canvas绘制流星(使用canvas实现黑客帝国数字雨效果)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- canvas如何调试(关于canvas.toDataURL 在iOS运行失败的问题解决)
- jscanvas画折线图(js+canvas实现代码雨效果)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- canvas两种绘图方法(canvas 基础之图像处理的使用)
- 大众推出了第五代高尔夫GT(大众推出了第五代高尔夫GT)
- 换代在即,现在是抄底 7.5代 高尔夫的最佳时机吗(换代在即现在是抄底)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
- 宋轶除了演过于曼丽,原来还演过一个青楼女子(宋轶除了演过于曼丽)
- 赵丽颖第一部当女主的戏,主角配角个个都是实力演员(赵丽颖第一部当女主的戏)
热门推荐
- 阿里云配置宝塔(在阿里云购买云服务器并安装宝塔面板的步骤)
- dede收录查询插件(dede:likearticle文章标签和tag标签关联错误解决方法)
- sqlserver小结(基于sqlserver的四种分页方式总结)
- Mysql中CONCAT、CONCAT_WS字符串拼接函数
- docker运行环境centos(如何在centos的docker里安装jupyter并开放端口)
- html5实时通讯(使用Html5 Stream开发实时监控系统)
- 安装vmware总是没有虚拟网卡(关于VMware安装完后没有虚拟网卡的问题)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- mysql使用步骤(聊一聊MySQL角色Role功能)
- 如何用xampp新建数据库(Windows系统下XAMPP的安装配置图文教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9