有乎-价值、共享、信任

What you care about-value, sharing, trust

实现将canvas显示的二维码在手机端长按保存

| 阅读:1880 发表时间:2020-03-01 21:22:09 HTML5+CSS3

实现步骤:

1、将URL以二维码形式通过canvas显示在网页上

2、将canvas的内容转换为base64

3、用转换后的内容设置为Image的src

4、清空包含canvas的div,追加 Imagea对象

 function getQrcode(url,qrcode_with=300,qrcode_height=300){
         //第1步在canvas中渲染URL  --》》》二维码

        $("#qrImg").qrcode({

            render: "canvas",

            width:300,

            height:300,

            text: decodeURIComponent(url)     //
        });

        $('#img-load').hide();

        $('#qrImg').find('canvas').css({'width':qrcode_with,'height':qrcode_height});

        //第2步 
        var img = new Image();
        img.src = $('#qrImg').find('canvas')[0].toDataURL("image/png");   //重要:Jquery必须用   [0] 来获取canvas对象,要不然获取到的是:obj对象
        $('#qrImg').html("").append(img);

    } 
*文章为作者独立观点,不代表【uuuho有乎】的立场
本文由【uuuho有乎】发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。

Who are we?