基于svg.js实现可编辑的图像(2)
来源:互联网 发布:用python3写网络爬虫 编辑:程序博客网 时间:2024/05/16 17:16
本篇将介绍基于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标签的图片地址即可。
0 0
- 基于svg.js实现可编辑的图像(2)
- 基于svg.js实现可编辑的图像(1)
- 基于svg.js可编辑图像中的文本换行
- 基于XML的可升级矢量图像(SVG)浅析
- 基于XML的可升级矢量图像(SVG)浅析
- JS实现可编辑的表格(转)
- JS实现可编辑的表格
- Vue.js实现可编辑的表格
- 基于SVG技术实现WebGIS的基本功能(2)
- 用d3.js实现基于SVG的线形图
- js 实现可编辑表格
- js实现可编辑表单
- 基于SVG技术的图像显示
- 基于SVG技术的图像显示
- IE的可编辑下拉框js实现
- JS可编辑的表格
- svg.draggable.js-实现svg拖拽的js插件
- JS实现可编辑下拉框
- 并查集的实现方法
- Xcode 代码提示失效的原因和解决方案
- oracle表相关操作
- java String 存储
- 273. Integer to English Words
- 基于svg.js实现可编辑的图像(2)
- 制作android签名
- ASP.NET实现禁止用户重复登录
- Centos7.3 安装bashdb和vim bash-support插件
- redhat 5支持ext4文件系统
- keil MDK中如何生成*.bin格式的文件
- C++语言中的常用数据类型转换
- 日志记录:Log4net
- 【C语言学习笔记】VS中"This function or variable may be unsafe."警告的解决办法