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

匿名 (未验证) 提交于 2019-12-02 22:10:10

        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();         }

headimgurl" />

<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>

    <div class="shareBox" id="shareMember"> 		<div class="top"> 			<div class="logo"><img src="wxheadimg.aspx?data=微信头像网址"/></div> 		</div>         <div class="middle">             <img src="makeQRCode.aspx?data=二维码内容" class="qrcode" />         </div>         <img src="" class="copyImage">     </div>  .shareBox{position:relative} .shareBox .copyImage{position:absolute;top:0px;left:0px;z-index:999;opacity:0;height:666px;width:666px;} 

  

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!