javascript 使用 JS 将 JQuery 二维码转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32164663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert JQuery QR Code to Image using JS
提问by armd0202
I was wondering how it's possible to download the JQuery generated QR code or convert to a downloadable image (png/jpeg) using javascript.
我想知道如何使用 javascript 下载 JQuery 生成的二维码或转换为可下载的图像 (png/jpeg)。
I tried what was here: Capture HTML Canvas as gif/jpg/png/pdf?But no success. I think it's related to the output. There is a table and canvas output, but both do not give the image data...
我尝试了这里的内容： Capture HTML Canvas as gif/jpg/png/pdf? 但没有成功。我认为这与输出有关。有一个表格和画布输出，但都没有给出图像数据......
Here is my code:
这是我的代码：
<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
<div id="output"></div>
<script>
jQuery(function(){
jQuery('#output').qrcode("http://");
})
var canvas = document.getElementById("output");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
</script>
Also I was hoping to surround the QR Code with a white background (Adding rows and columns within the div) before converting to image to aid the detection (so that the background is also included in the image).
此外，我希望在转换为图像之前用白色背景包围二维码（在 div 中添加行和列）以帮助检测（以便背景也包含在图像中）。
Any help is appreciated...
任何帮助表示赞赏...
回答by user3223100
The only problem with this is that you called the toDataURL() function not for the canvas element. You can get the canvas with jquery and it will work.
唯一的问题是您调用了 toDataURL() 函数而不是画布元素。您可以使用 jquery 获取画布，它会起作用。
jQuery(function(){
$('#output').qrcode("http://");
var canvas = $('#output canvas');
console.log(canvas);
var img = canvas.get(0).toDataURL("image/png");
//or
//var img = $(canvas)[0].toDataURL("image/png");
document.write('<img src="'+img+'"/>');
});
回答by fuyushimoya
In your code
在你的代码中
var canvas = document.getElementById("output");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
would get executed earlier than jQuery('#output').qrcode("http://");, domreadyonly starts when every element on the page is accessible, and scriptsare executed on load. So they should be put into that domreadycallback too.
将早于 执行jQuery('#output').qrcode("http://");，domready仅在页面上的每个元素都可访问时启动，并scripts在加载时执行。所以他们也应该被放入那个domready回调中。
Another issues is jquery.qrcode creates a canvasunder target, so var canvas = document.getElementById("output");would find the div, not the canvas, you can use document.querySelector("#output canvas");to get it.
另一个问题是 jquery.qrcode 创建了一个canvas下目标，因此var canvas = document.getElementById("output");会找到div，而不是画布，您可以使用document.querySelector("#output canvas");它来获取它。
And if you just want a image to be downloadable, set an event handler, then when it's triggered, create an <a>and set hrefto the canvas.toDataURL, downloadto the filename you want, then simulate a click.
如果您只想下载一个图像，设置一个事件处理程序，然后在它被触发时，创建一个<a>并设置href为 canvas.toDataURL，设置为download您想要的文件名，然后模拟单击。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div id="output"></div>
<script>
jQuery(function(){
jQuery('#output').qrcode("http://");
// the lib generate a canvas under target, you should get that canvas, not #output
// And put the code here would ensure that you can get the canvas, and canvas has the image.
var canvas = document.querySelector("#output canvas");
var img = canvas.toDataURL("image/png");
$(canvas).on('click', function() {
// Create an anchor, and set its href and download.
var dl = document.createElement('a');
dl.setAttribute('href', img);
dl.setAttribute('download', 'qrcode.png');
// simulate a click will start download the image, and name is qrcode.png.
dl.click();
});
// Note this will overwrite any current content.
// document.write('<img src="'+img+'"/>');
})
</script>