基於svg.js實現可編輯的圖像（2）

本篇將介紹基於svg.js下實現可拖動、修改的二維碼。

一、二維碼的繪製

首先要先了解下jquery.qrcode.js這個插件，主要功能是用於生成二維碼，所生成的二維碼主要有兩種，一種是table格式另一種是canvas格式，在這裏主要是用到canvas格式的二維碼

$("#qrcode").qrcode({
    render: "canvas",
    width: 200,
    height:200,
    text: str
});

$(“#qrcode”)是要繪製二維碼的元素，render的值可以爲table或者canvas，text就是二維碼的內容。

二、canvas格式的二維碼轉爲圖片

因爲canvas格式的二維碼是無法放到svg標籤中的，所以先轉爲圖片再插入到svg標籤下。

var mycanvas = $("#qrcode canvas");
var image = mycanvas[0].toDataURL("image/png");  

這裏的image 將返回一個圖片的地址然後再進行繪製到svg中

var image = svgItem.param.draw.image(imgSrc, 200, 200);

imgSrc就是要繪製圖片的地址，這樣基本就已經完成一個二維碼在svg標籤中的繪製了。

三、svg標籤中的二維碼的拖動和修改

用這種方式所生成的二維碼的拖動和改變大小基本和文本以及線條是一致的，詳見上一篇文章。

image.draggable();//可拖動
image.selectize().resize();//可改變大小

至於要修改二維碼的內容，只要生成一個新的二維碼獲取其地址，然後修改svg標籤中對應的image標籤的圖片地址即可。