您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

纯前端js实现二维码生成并转文件并上传到oss

发布时间：2022-05-31 10:08:53编辑：雪饮阅读（）

 相关的脚本

<script>
    var apkQrcode;
    var apkQrcodeUrl;
    function getBlob(base64) {
        var mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
        var byteString = atob(base64.split(',')[1]); //base64 解码
        var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
        var intArray = new Uint8Array(arrayBuffer); //创建视图
        for (var i = 0; i < byteString.length; i += 1) {
            intArray[i] = byteString.charCodeAt(i);
        }
        return new Blob([intArray], {
            type: mimeString
        });
    }
    function createQrcode(obj){
        var qrcode_val=$(obj).val();
        if(qrcode_val){
            if(apkQrcode){
                $("#qrcode").html("");
            }
            apkQrcode=new QRCode(document.getElementById("qrcode"),qrcode_val);
            let canvas = apkQrcode._el.querySelector("canvas");
            var base64Text = canvas.toDataURL("image/png");
            var blob = getBlob(base64Text);
            console.log("blob",blob);


            let fd = new FormData()
            fd.append('file', blob);
            $.ajax({
                url:'/api/Common/hw_upload.html',
                type:'post',
                data:fd,
                contentType:false,
                processData:false,
                dataType:'json',
                success:function(data){
                    console.log("qrcode create data",data);
                    try{
                        if(data.code==1){
                            apkQrcodeUrl=data.data.ObjectURL;
                            $("#c-qrcode_image").val(apkQrcodeUrl);
                        }
                        else{
                            layer.msg("二维码生成失败！");
                        }
                    }
                    catch (e) {
                        layer.msg(e.toString());
                    }

                },
                error:function(p1,p2,p3){
                    layer.msg(p2);
                }
            });
        }

        // 带背景色二维码
        /*
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "https://mp.weixin.qq.com/s/MvgBo5N2HvE_XvNSHNIw3w",
            width: 128,
            height: 128,
            colorDark: "#f60",
            colorLight: "#ccc",
            correctLevel: 0 // 二维码结构复杂性 0~3
        });
        */
    }

</script>

用在input上

<input id="c-apkfile" class="form-control" size="50" name="row[apkfile]" type="text" value="" onchange="createQrcode(this)">

用到的qrcode.js

qrcode.js

ce933eb7d8f0a4ec3f21504ca65b7b5e.js (32.39 KB)