使用qrcode生成二维码并可以长按扫描，分享，保存到相册

使用qrcode生成二维码，长按扫描

  Css代码

    .qcode canvas {

        width:4rem;

        height:4rem;

    }

    #imagQrDiv {

     width: 4rem;

    height: 4rem;

    margin-left: 7rem;

    margin-top: 1rem;

    margin-bottom: 0.5rem;

 

}

 

Html代码

 

                      <div class="qcode" id="code" style="display:none;">

                         

                      </div>

                      <div id="imagQrDiv">

 

                      </div>

                      <div class="qcideText">

                          长按保存二维码，分享微信好友

                      </div>

 

Js代码：

 <script src="~/Scripts/js/jquery.min.js"></script>

<script src="~/Scripts/js/jquery.qrcode.min.js"></script>//基于jquery.min.js

<script>

    $(document).ready(function () {

         //生成canvas

         $('#code').qrcode("http://@Request.Url.Host/Member/Register?id=@Model.MemberId");       //任意内容

        //从 canvas 提取图片 image

        function convertCanvasToImage(canvas) {

            //新Image对象，可以理解为DOM

            var image = new Image();

            // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持

            // 指定格式 PNG

            image.src = canvas.toDataURL("image/png");

            return image;

        }

        //获取网页中的canvas对象

        var mycanvas1 = document.getElementsByTagName('canvas')[0];

        //将转换后的img标签插入到html中

        var img = convertCanvasToImage(mycanvas1);

        $('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

    })

</script>