jquery.qrcode.min.js 可以從這個地址下載https://www.jq22.com/yanshi294

image.png

html

image.png

$(function(){
        var qrcodewidth = 100;
        var qrcodeheight = 100;
        //canvas寬高
        var canvaswidth = qrcodewidth;
        var canvasheight = qrcodeheight + 40;
        //logo寬高
        var logowidth = 40;
        var logoheight = 40;
        //文字描述位置
        var textleft = qrcodewidth / 2;
        var texttop = qrcodeheight + 20;
        //logo位置
        var logoleft = (qrcodewidth - logowidth) / 2;
        var logotop = (qrcodeheight - logoheight) / 2;
        var qrcode = $('#qrcode').qrcode({
            render : 'canvas',
            text : utf16to8("{$data.user.invitation_url}"),
            width : qrcodewidth,
            height : qrcodeheight,
            background : '#ffffff',
            foreground : '#000000',
        });
        var canvas = $("#qrcode canvas")[0];
        var imgLogo = new Image(logowidth, logoheight);
        imgLogo.src = '__IMG__/logo_t.png';
        var context = canvas.getContext('2d');
        imgLogo.crossOrigin = 'Anonymous';
        imgLogo.onload = function(){
            context.drawImage(imgLogo ,logoleft, logotop, logowidth, logoheight);
            context.fillStyle = '#000000';
            context.font = 'bold ' + 16 + 'px serif';
            context.textAlign = 'center';
            //轉成base64格式存下來 
            $('#saveQrCode').attr('href',$('#qrcode').find('canvas')[0].toDataURL("image/png"));
            $('#saveQrCode').attr('download', 'chart-download');
            console.log($('#qrcode').find('canvas')[0].toDataURL("image/png"));
        }
})

下載click事件

// 這里是獲取到的圖片base64編碼,這里只是個例子哈，要自行編碼圖片替換這里才能測試看到效果
    var imgUrl = $(this).attr('href');
    // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時候），那么調用該方法去下載圖片
    if (window.navigator.msSaveOrOpenBlob) {
        var bstr = atob(imgUrl.split(',')[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        var blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
        } else {
        // 這里就按照chrome等新版瀏覽器來處理
        var a = document.createElement('a')
        a.href = imgUrl
        a.setAttribute('download', 'chart-download')
        a.click()
    }