介绍 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 位图(流);
,,,//保存为PNG到内存流,
,,,MemoryStream 小姐=,new MemoryStream ();
,,,image.Save (ImageFormat.Png女士也);
,,,//重新输出头像
,,,Response.BinaryWrite (ms.GetBuffer ());
,,,Response.End ();
,,,ms.Close ();
,,,response.Close ();
,,,stream.Close ();
} & lt; script 类型=拔谋?javascript"比;
时间=window.onload function ()
{
,,,var IMAGE_URL;
,,,function takeScreenshot () {
,,,,,,,var shareContent =, . getelementbyid (& # 39; shareMember& # 39;);//需要截图的包裹的(原生的)DOM 对象
,,,,,,,var width =, shareContent.offsetWidth;,//获取dom 宽度
,,,,,,,var height =, shareContent.offsetHeight;,//获取dom 高度
,,,,,,,var canvas =, document.createElement (“canvas");,//创建一个画布节点
,,,,,,var scale =, 1,,//定义任意放大倍数,支持小数
,,,,,,,canvas.width =, width *,规模,,//定义canvas 宽度,*,缩放
,,,,,,,canvas.height =, height *,规模,,//定义帆布高度,*缩放
,,,,,,,canvas.getContext (“2 d") .scale(规模,规模);,//获取背景下,设置的规模
,,,,,,//var rect =, shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量
,,,,,,,//canvas.getContext (“2 d") .translate (-rect.left, -rect.top);//设置上下文的位置,值为相对于视窗的偏移量负值,让图片复位
,,,,,,,var opts =, {
,,,,,,,,,,,:,,//,添加的scale 参数
,,,,,,,,,,,帆布,帆布,,//自定义,画布
,,,,,,,,,,,日志:,真的,,//日志开关
,,,,,,,,,,,宽度:宽度,,//dom 原始宽度
,,,,,,,,,,,身高:身高,,//dom 原始高度
,,,,,,,,,,,写成backgroundColor:, & # 39;透明# 39;
,,,,,,,};
,,,,,,,html2canvas (shareContent,选择,{useCORS:真的,日志:真的}),然后(function (帆布)
,,,,,,,{
,,,,,,,,,,,IMAGE_URL =, canvas.toDataURL(“图像/png");
,,,,,,,,,,,美元(& # 39;.copyImage& # 39;) .attr (& # 39; src # 39;, IMAGE_URL);
,,,,,,,})
,,,}
,,,takeScreenshot ();
}
& lt;/script> & lt; div 类=皊hareBox", id=皊hareMember"比;
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了如何使用帆布生成含有微信头像的邀请海报没有微信头像问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资料,得出解决思路,用帆布将页面绘制生成图片,
,,,问题:帆布图片跨域。
,,,解决过程(填坑历程):
,,,1 .从网上存在如图解决办法,,,,img.crossOrigin =?,,(专业采坑,数年)。亲测无效。很是不解。
,,,2 .网上也存在后端服务解决
,,设置标题头,或者nginx服务配置等允许访问。但是,存在问题(图片大部分为了优化,都会存放在第三方cdn上。面。这是第三方的配置,是否允许,自己很难控制)
,,,3 .解决办法:采用所有图片路径,转化为base64流来处理。图片存为本地图片。这也可以就避开了跨域问题。
,,,最后个人解决方法:没有采用第3种保存本地,这样会增加本地图片,而且会存在本地跟微信端没有同步更新的问题,不是用户最新的头像个。人是采用远程下载后直接绘制输出图片,这样图片就变成本地图片,解决帆布绘制图片不支持跨域问题。
,,wxheadimg。aspx页面代码:
,,帆布绘制页面引用:<代码> & lt; img src=https://www.yisu.com/zixun/眞xheadimg.aspx吗?data=headimgurl "/>
,,,帆布绘制代码也顺便弄出来:
,,页面代码:
