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

   页面代码 ：

    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>
jpg.shareBox{
position:relative}
.shareBox .copyImage{
    position:absolute;
    top:0px;
    left:0px;
    z-index:999;
    opacity:0;
    height:666px;
    width:666px;
}
    

总结

以上所述是小编给大家介绍的使用canvas生成含有微信头像的邀请海报没有微信头像问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！