js 生成二維碼 ,（圖片格式的，能夠長按試別，保存）

上次說到了 js生成二維碼， 可是是div格式的二維碼。  是不能長按試別的。  
今天主要說  圖片格式的二維碼。

 

一，直接把這兩腳本複製過去就好了   ，這是在線腳本

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

 

 

二html  代碼

第一個div就是咱們生成的 二維碼  ，而後js 轉爲img格式，  賦值給下面div的 html屬性

 

 

三. JS代碼   直接扣過去就好了

//容器生成二維碼
var url = "" + url + "/Index?mCode=" + code + "";     // 二維碼連接
jQuery('.box').qrcode({
render: "canvas",
text: url
});

 

//把canvas容器轉爲img
function convertCanvasToImage(canvas) {
//新Image對象，能夠理解爲DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64編碼的URL
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}

 

//獲取頁面上的canvas對象
var MYcanvas = $('canvas')[0];
//調用convertCanvasToImage()方法把canvas轉爲img格式
var img = convertCanvasToImage(MYcanvas);
//將img插入第二個容器中
$(".erweimaImg").append(img);                    //   插入到這個容器裏面，$(".erweimaImg")