0

我正在制作一个网站，用户可以生成一个二维码。每当生成 qrcode 时，我都想将此图像保存到文件中并将图像名称放入数据库中。但我不知道如何保存它。这是一个 ASP MVC 4 网站，但在我看来，我正在使用 JavaScript 来生成 qrcode。在这里，我使用的是 qrcode.js 库。

JavaScript：

<script>
function makeCode() {
    var qrcodeId = document.getElementById("QrcodeId");
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
    qrcode.makeCode("http://localhost:50810/Profile/Qrcode?id=" + qrcodeId);
}
</script>

在我看来HTML：

<canvas id="qrcode"></canvas>

如何保存 qrcode 图像？

谢谢！

** 编辑： **

我查看了以下示例： jeromeetienne.github.io/jquery-qrcode/examples/basic.html 但是当我尝试它时，我的html以这种方式输出：

<div id="qrcode" title="test">
<canvas width="100" height="100" style="display: none;"></canvas>
<img style="display: block;" src="data:image/png;  base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACOUlEQVR4nO3WQXLDMAxDUd//0u22M61pkAQlpf6YyS4iIb0scl3X9bX781cmZzn3DXy2FwAEEEAAqYJMxwmyo9f0TkCSvaZ3ApLsNb0TkGSv6Z2AJHtN75RAlMfpPLT5QqX5zh9Kc9b+EtUAAgggUQAB5L0gVbTVvQB5CCCAABIFEEAAiaLOd/UC5CGAAAJIlFeAOOO8+I5e0zsBSfaa3glIstf0TkCSvaZ3ApLsNb3zF8iOj1JWvZBz1qbP9gKAAAIIIIB8KMif7Q7MNO4pObvdjwByWAA5LIAcFkCeDoqPsfpcdb46y/WjsP/LAgQQQLJlTzgHSLLY9CxlfrXDEtzJBTtmKfOrHQABxLtgxyxlfrUDIG8EWV02UazUS/mes5e7PyDNXoA8zFK+5+wFyMMs5XvOXoA8zFK+5+w1DuJ+DFc6+1aDNOcDcjcfkCCAAAJIFEAMD73oAmM/CmU+IIAAAkjuAv8LxHoDY6oPPQ05/gOTmywOIIcFkMMCyGF5LUj1As7P5EN35ivfU5OYD0jywQC5uxAggAASXegVINOZBlHOOnupASQ46+ylBpDgrLOXGkCCs85eagAJzjp7qbGCqI/xKRfv9Hfe52YvIIAAEvUABBDTTvcDVWY57wPIQwBJ7uzMVwJIcmdnvhJAkjs785UAMpTVXZtIgAACSNQLEEAAiXrtfxznOed8ZZb7BwZIcA4QwzlA8gsBiXsAcnfuCJAdn0b50UeszurcGxBAAAEEEECq9/4GuVKoqz6RVdQAAAAASUVORK5CYII=">
</div>

在示例中，图像被放置在画布中。

这是我更新的 JS 代码：

<script type="text/javascript">
    function makeCode() {
        oCanvas = document.getElementById("qrcode");
        var qrcode = new QRCode(oCanvas, {
            render: canvas,
            width: 100,
            height: 100,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        var elText = document.getElementById("text");
        qrcode.makeCode(elText.value);
        //window.open(oCanvas.toDataURL("image/png"));
        //Canvas2Image.saveAsPNG(oCanvas);

       // var image = document.getElementById("canvas").getElementsByTagName("img");
           //console.log(document.getElementById('canvas').getElementsByTagName("img").getAttribute("src"));
        //console.log(image[0]["attributes"][1]);
    }
    $("#dataURL").click(function () {
        makeCode();
    });
</script>

HTML：

<div id="qrcode"></div>

如果我将 qrcode 直接放在画布上，我不会得到任何输出，但我确实在 firebug 中看到了图像。

4

2 回答 2

1

您可以尝试将其转换为 dataURL。

var dataURL = document.getElementById('qrcode').toDataURL();

然后像这样保存。（你可以从 js 附加这个）

<a href="dataURL" target="_blank" download="image.png">

并非所有浏览器都支持这一点。但是现代浏览器会。

于 2013-08-13T11:13:31.510 回答
0

你可以这样试试：

             vm.gerarQrCode = function(texto){
                if(vm.qrcode == null)
                    vm.qrcode = new QRCode(
                        document.getElementById("qrcode")
                        , {
                            text: texto,
                            width: 128,
                            height: 128,
                            colorDark : "#000000",
                            colorLight : "#ffffff",
                            correctLevel : QRCode.CorrectLevel.H
                        });
                else {
                    vm.qrcode.clear(); // clear the code.
                    vm.qrcode.makeCode(texto); // make another code.
                }
            };


            vm.downloadQrCode = function(){
                var src= document.querySelector('#qrcode img').getAttribute("src");
                var url = src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20qrcodeconvite.png;');
                window.open(url);

            };
于 2018-03-17T13:11:37.223 回答