用js怎么实现把一个链接变成二维码

JavaScript018

用js怎么实现把一个链接变成二维码,第1张

<div id = "qrcodeid"></div> //生成的二维码放在此 div 中

<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>//引入qrcode.js(到https://github.com/jeromeetienne/jquery-qrcode 下载 )

<script>

function utf16to8(str) { //解决中文乱码

  var out, i, len, c 

  out = "" 

  len = str.length 

  for(i = 0 i < len i++) { 

  c = str.charCodeAt(i) 

  if ((c >= 0x0001) && (c <= 0x007F)) { 

    out += str.charAt(i) 

  } else if (c > 0x07FF) { 

    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)) 

    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)) 

    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)) 

  } else { 

    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)) 

    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)) 

  } 

  } 

  return out 

</script>

<script>//此处生成名片二维码(如要生成普通链接二维码 则 “text”参数值 直接替换成普通链接即可)

var the_text = "BEGIN:VCARD \r\nFN:姓名 \r\nTELCELL,VOICE:15000000000 \r\nTITLE:职称 \r\nORG:公司(组织) \r\nEMAILINTERNET,HOME:123@qq.com \r\nADRWORK,POSTAL:地球中国山东... \r\nURL:http://leerd.cn \r\nEND:VCARD"

the_text = utf16to8(the_text)

//alert(the_text)

jQuery('#qrcodeid').qrcode({

width:140,

height:140,

render:"canvas", //设置渲染方式 table canvas

typeNumber : -1,  //计算模式 

correctLevel  : 0,//纠错等级 

background   : "#ffffff",//背景颜色 

foreground   : "#000000",//前景颜色 

text:the_text

}) 

</script>

通常可以通过vue创建项目来生成移动端点击下载的二维码。

第一步:安装@xkeshi/vue-qrcode.js包

npm install --save @xkeshi/vue-qrcode //安装到生产环境

第二步:组件中使用

template

<div class="qrcodeBox">

<qrcode :value="xxx" v-if="xxx"></qrcode>

<!-- v-if="xxx"是为了防止链接没获取到显示空白,确保获取到链接后才开始渲染 -->

</div>

script

import Qrcode from "@xkeshi/vue-qrcode"//引入

data(){undefined

xxx:" " //获取到的链接}

//注册生成二维码组件

components: {undefinedqrcode: Qrcode},

methods:{undefine}

1: 使用SwetakeQRCode在Java项目中生成二维码

http://swetake.com/qr/ 下载地址

或着http://sourceforge.jp/projects/qrcode/downloads/28391/qrcode.zip

这个是日本人写的,生成的是我们常见的方形的二维码

可以用中文

如:5677777ghjjjjj

2: 使用BarCode4j生成条形码和二维码

BarCode4j网址:http://sourceforge.NET/projects/barcode4j/

barcode4j是使用datamatrix的二维码生成算法,为支持qr的算法

datamatrix是欧美的标准,qr为日本的标准,

barcode4j一般生成出来是长方形的

如:88777alec000yan

这个博客这方面说的挺清楚的:

http://baijinshan.iteye.com/blog/1004554

3:zxing

zxing 这个是google的

下载地址

http://code.google.com/p/zxing/downloads/list

Java代码:

import java.io.File

import java.util.Hashtable

import com.google.zxing.BarcodeFormat

import com.google.zxing.EncodeHintType

import com.google.zxing.MultiFormatWriter

import com.google.zxing.client.j2se.MatrixToImageWriter

import com.google.zxing.common.BitMatrix

import com.google.zxing.qrcode.QRCodeWriter

public class QRCodeEvents {

public static void main(String []args)throws Exception{

String text = "你好"

int width = 100

int height = 100

String format = "png"

Hashtable hints= new Hashtable()

hints.put(EncodeHintType.CHARACTER_SET, "utf-8")

BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, width, height,hints)

File outputFile = new File("new.png")

MatrixToImageWriter.writeToFile(bitMatrix, format, outputFile)

}

}

4:google chart api就有实现二维码的方法

利用这个api,使用google appengine进行实现。

5:JS生成二维码

使用jQuery-qrcode生成二维码

先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取),

qrcode.js 是实现二维码数据计算的核心类,

jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)

支持的功能主要有:

Js代码:

text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容

Js代码:

render : "canvas",//设置渲染方式

width : 256, //设置宽度

height : 256, //设置高度

typeNumber : -1, //计算模式

correctLevel: QRErrorCorrectLevel.H,//纠错等级

background : "#ffffff",//背景颜色

foreground : "#000000" //前景颜色

使用方式非常简单

Js代码:

jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content})

经过简单实践,

使用canvas方式渲染性能还是非常不错的,但是如果用table方式,性能不太理想,特别是IE9以下的浏览器,所以需要自行优化一下渲染table的方式,这里就不细述了。

其实上面的js有一个小小的缺点,就是默认不支持中文。

这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,

而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,

英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。

解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:

function utf16to8(str) {

var out, i, len, c

out = ""

len = str.length

for(i = 0i <leni++) {

c = str.charCodeAt(i)

if ((c >= 0x0001) &&(c <= 0x007F)) {

out += str.charAt(i)

} else if (c >0x07FF) {

out += String.fromCharCode(0xE0 | ((c >>12) &0x0F))

out += String.fromCharCode(0x80 | ((c >> 6) &0x3F))

out += String.fromCharCode(0x80 | ((c >> 0) &0x3F))

} else {

out += String.fromCharCode(0xC0 | ((c >> 6) &0x1F))

out += String.fromCharCode(0x80 | ((c >> 0) &0x3F))

}

}

return out

}