jQuery 獲取canvas裡面的base64的二維碼圖片地址，並顯示在img中
阿新 • • 發佈：2018-12-10
大家知道一款很火的二維碼生成工具qrcode.js，這是一款基於jQuery的二維碼生成外掛，能將任意的文字轉化為一個二維碼，通過canvas的方式呈現，但是有些時候我們需要取出裡面的url，今天就一起來做做這個事情。
<!doctype html> <html lang="en"> <head> <meta name="Description" content=""> <title>測試canvas</title> <!--引入js--> <script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script> <script src="http://www.jq22.com/js/jquery.qrcode.min.js"></script> </head> <body> <script> //建立一個隱藏的div $('body').append('<div style="display:none;" id="qrcode_xp"></div>'); //繫結上面的div生成一個二維碼 $('#qrcode_xp').qrcode('your content'); var ca=$("#qrcode_xp").find("canvas")[0]; //獲取二維碼中的圖片地址 var src_xp=ca.toDataURL('image/jpeg'); var img_xp='<img style="width:60px;" src="'+src_xp+'">'; //組裝地址作為一個新的圖片,並且通過控制檯檢視圖片資訊 console.log(img_xp); //將一段文字中的文字替換為這個圖片 //str = str.replace('$xpqrcode$', getRightStr(img_xp)); //移除之前建立的隱藏的canvas $('#qrcode_xp').remove(); </script> </body> </html>