基于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标签的图片地址即可。