123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- app.service("QRCodeOptions", ['$rootScope', function ($rootScope) {
- //生成二维码
- function getQRCodeImageData(option) {
- var text = option.text, label = option.label, logoDom = option.logoDom;
- var size = 200;
- var labelHeight = 0;
- var logoSize = 40;
- if (label != null) {
- labelHeight = 30;
- }
- //生成二维码
- var qrDom = $("<div></div>");
- qrDom.qrcode({
- render: "canvas", // 渲染方式有table方式(IE兼容)和canvas方式
- width: size, //宽度
- height: size, //高度
- text: text, //内容
- typeNumber: -1,//计算模式
- correctLevel: 2,//二维码纠错级别
- background: "#ffffff",//背景颜色
- foreground: "#000000" //二维码颜色
- });
- var canvas = qrDom.find("canvas")[0];
- var context = canvas.getContext("2d");
- var imgData = context.getImageData(0, 0, size, size);//获取到二维码图片数据流
- //生成背景(用来绘制标签、背景图等)
- var backDom = $("<canvas></canvas>");
- var maxW = size;
- var maxH = size + labelHeight;
- var left = 0;
- var top = 0;
- backDom.attr({"width": maxW, "height": maxH});
- var backCanvas = backDom[0];
- var ctx = backCanvas.getContext("2d");
- //填充背景为白色
- ctx.fillStyle = "#fff";
- ctx.fillRect(0, 0, maxW, maxH);
- ctx.putImageData(imgData, left, top);//合并二维码到带背景信息的画布
- if (label) {
- //绘制标题
- ctx.font = "bold 24px Arial";//使用粗体,稍大的字号,否则打印出来的不清晰
- ctx.textAlign = "center";
- ctx.fillStyle = "#000";
- ctx.fillText(label, size / 2 + left, (size + labelHeight - 8) + top);
- }
- //绘制logo
- if (logoDom) {
- var logoBorder = 4;
- var centerSize = 2 * logoBorder + logoSize;
- if ($("#qrcodeOptPreviewLogo").length > 0) {
- //清空中心区域用来绘制logo
- ctx.rect((size - centerSize) / 2 + left, (size - centerSize) / 2 + top, centerSize, centerSize);
- ctx.fillStyle = "#fff";
- ctx.fill();
- //logo图片
- ctx.drawImage(logoDom, (size - logoSize) / 2 + left, (size - logoSize) / 2 + top, logoSize, logoSize);
- } else {
- console.log("请在页面中放置一个qrcodeOptPreviewLogo")
- }
- }
- var dataURL = backCanvas.toDataURL("image/png");
- return dataURL;
- }
- return {
- getQRCodeImageData: getQRCodeImageData
- };
- }]);
|