I am making a website were users can generate a qrcode. Whenever a qrcode is generated I want to save this image to a file and put the imagename in a database. But I have no idea how I can save this. This is a ASP MVC 4 website but I am using JavaScript in my view to generate the qrcode. Here for I am using the qrcode.js library.
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 in my view:
<canvas id="qrcode"></canvas>
How do I save the qrcode image?
Thx!
** EDIT: **
I looked at the example from: jeromeetienne.github.io/jquery-qrcode/examples/basic.html but when I try it my html outputs it this way:
<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>
While on the example the image is put in the canvas.
This is my updated JS code:
<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>
If I put my qrcode directly on the canvas I get no output but I do see the image in firebug.
I am making a website were users can generate a qrcode. Whenever a qrcode is generated I want to save this image to a file and put the imagename in a database. But I have no idea how I can save this. This is a ASP MVC 4 website but I am using JavaScript in my view to generate the qrcode. Here for I am using the qrcode.js library.
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 in my view:
<canvas id="qrcode"></canvas>
How do I save the qrcode image?
Thx!
** EDIT: **
I looked at the example from: jeromeetienne.github.io/jquery-qrcode/examples/basic.html but when I try it my html outputs it this way:
<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>
While on the example the image is put in the canvas.
This is my updated JS code:
<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>
If I put my qrcode directly on the canvas I get no output but I do see the image in firebug.
Share Improve this question edited Aug 14, 2013 at 12:14 Nanou Ponette asked Aug 13, 2013 at 10:59 Nanou PonetteNanou Ponette 1,4024 gold badges24 silver badges47 bronze badges 02 Answers
Reset to default 1You may try converting it into a dataURL.
var dataURL = document.getElementById('qrcode').toDataURL();
And then save it like this. ( you may append this from js)
<a href="dataURL" target="_blank" download="image.png">
Not all browsers will support this. But modern browsers will.
You can try this way:
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);
};