动态生成二维码，保存到blobImage，并在报表中显示

cactus78

找了半天，也没找到一个比较全面的能实现这个功能的帖子，发现好多人问，特分享出来，以便大家参考少走弯路。

参考帖子：
1、动态生成二维码，需要jquery.qrcode.min.js。
源码：https://github.com/haoxiaobo/jquery-qrcode

2、通过Canvas及File API缩放并上传图片
http://blog.csdn.net/renfufei/article/details/9836317        

2、BeX5 ---在报表中显示blobImage上传的图片：
http://bbs.wex5.com/forum.php?mo ... 3135&extra=page%3D4

进入正题：
一、首先生成二维码：
两种情况：
1、生成完毕，直接创建一个超链接，点击便可下载

1.         Model.prototype.button1Click = function(event){
   
2.                 var qrcodeElmt = this.getElementByXid("qrcode");//div的xid
   
3.                 qrcodeElmt.innerHTML = "";
   
4.                 $(qrcodeElmt).qrcode({
   
5.                         render :"canvas",
   
6.                         text: "http://www.baidu.com",
   
7.                         height: 300,
   
8.                         width: 300//,
   
9.                         //src: 'img/head.png'
   
10.                 });
    
11.                 var cavas = qrcodeElmt.children[0];
    
12.                 var imgUrl = cavas.toDataURL("image/png");
    
13.                 var a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    
14.                 a.href = imgUrl;
    
15.                 a.download = "123";
    
16.                 a.innerHTML = "下载图片"
    
17.                 var event = document.createEvent('MouseEvents');
    
18.                 event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    
19.                 a.dispatchEvent(event);
    
20.         };
    

复制代码

2、生成完成后，用ajax保存到后台blobImage中：
首先，应该有一条相应的数据，（数据库表【对应的概念中的关系】中失少有两个blobImage的字段，一个存储blobImage的字段，类型blob，一个存储blobImage修改时间的字段，类型datetime；还得有个id字段）。
blobImage组件配置如下图：

1.         Model.prototype.button1Click = function(event){
   
2.                 var me = this;
   
3.                 var blobImage = this.comp("blobImage1");//页面中的blobImage组件
   
4.                 var fID = this.comp("dialogData").getValue(blobImage.blobConcept);//获得这条记录的fID(实际上就是概念名)
   
5.                 var url = "http://www.baidu.com";
   
6. 
   
7.                 var qrcodeElmt = this.getElementByXid("qrcode");
   
8.                 qrcodeElmt.innerHTML = "";
   
9.                 $(qrcodeElmt).qrcode({
   
10.                         render :"canvas",
    
11.                         text: url,//这是二维码内储存的信息
    
12.                         height: 300,
    
13.                         width: 300//,
    
14.                         //src: 'img/head.png'
    
15.                 });
    
16.                 var cavas = qrcodeElmt.children[0];
    
17.                 var imgData = cavas.toDataURL("image/png");
    
18.                 //alert(imgData);
    
19.                 var params = new Request.ActionParam();
    
20.                 params.setString("blobDataModel", blobImage.blobDataModel);
    
21.                 params.setString("blobConcept", blobImage.blobConcept);
    
22.                 params.setString("blobRelation", blobImage.blobRelation);
    
23.                 params.setString("blobLastModifiedRelation", blobImage.blobLastModifiedRelation);
    
24.                 params.setString("limitSize", blobImage.limitSize);
    
25.                 params.setString("blobConceptValue", fID);
    
26.                 params.setString("blobData", imgData);
    
27.                 //alert(imgData);
    
28.                 Request.sendBizRequest({
    
29.                         contentType : 'application/xml',//用application/json报错（好像是XX.toJSON不是方法），不知为啥
    
30.                         //dataType : "json",
    
31.                         context : me.getContext(),
    
32.                         parameters : params,
    
33.                         action : "blobUpdateAction",//懒了，用了系统的上传
    
34.                         callback : function(callbackData) {
    
35.                                         blobImage.refresh();//必须刷新，否则不显示
    
36.                                         if(!callbackData.state){
    
37.                                         Request.errorMessage(callbackData, "执行失败！", null, null);
    
38.                                 }
    
39.                         }
    
40.                 });
    
41.         };
    

复制代码

       二、保存到数据库
        process处理前事件，生成设备二维码，保存blobImage之前处理blobData数据，强烈建议自己写一个上传的Action
        挺简单的大概就是 update 概念名 (blob关系名, updatetime关系名) values (?, ?) where 概念名 = ？；再把3个值赋进去就行了。
         如果自定义上传Action就不需要下面这段代码了。

1.         //生成设备二维码，保存blobImage之前处理blobData数据，
   
2.         //把byte[]转成InputStream，否则报错，java.lang.IllegalArgumentException: argument type mismatch
   
3.         public static void equipmentProcessBeforeBlobUpdateAction() throws IOException {
   
4.                 String imageData = null;
   
5.                 try{
   
6.                         imageData = (String) ContextHelper.getRequestContext().getActionContext().getParameter("blobData");
   
7.                 }catch(Exception e){
   
8.                         return;//报错说明是系统按钮上传
   
9.                 }
   
10.                 imageData = imageData.substring(22);
    
11.                 //System.out.println(imageData);
    
12.                 BASE64Decoder decoder = new BASE64Decoder();
    
13.                 byte[] data = decoder.decodeBuffer(imageData);
    
14.                 for(int i=0; i < data.length; i++){
    
15.                 if(data[i]<0)
    
16.                 data[i] += 256;//调整异常数据
    
17.                 }
    
18.                 InputStream image = new ByteArrayInputStream(data);//把byte转成InputStream
    
19.                 ContextHelper.getRequestContext().getActionContext().setParameter("blobData", image);
    
20.         }

复制代码

三、在报表中显示：
要在报表中显示图片，需要将单元格设置成display-type:image，然后这个单元格关联的数据必须是一个图片的有效URL，所以需要自定义queryAction把blob下载下来，再组装一个URL，代码如下：

1. 
   
2.         public static Table printMeterCard(String concept,String idColumn,String select,String from,String condition,List range,String filter,Boolean distinct,Integer offset,Integer limit,String columns,String orderBy,String aggregate,String aggregateColumns,Map variables,String dataModel,String fnModel){
   
3.         //System.out.println("SELECT " + select + " FROM " + from + "; dataModel:" + dataModel);
   
4.                 Table t = BizData.query(concept, idColumn, select, from, condition, range, filter, distinct, offset, limit, columns, orderBy, aggregate,
   
5.                 aggregateColumns, variables, dataModel, fnModel);
   
6.                 Iterator<Row> it = t.iterator();
   
7.                 while (it.hasNext()) {
   
8.                         Row r = it.next();
   
9.                         String url = "/UI2/system/components/justep/blob/server/download.j"
   
10.                         + "?process=/logistics/product/process/equipment/equipmentProcess" //流程名称
    
11.                         + "&activity=printMeterCardActivity" //环节名称
    
12.                         + "&action=blobDownloadAction" //调用的Action
    
13.                         + "&blobDataModel=/logistics/product/data" //数据模块目录
    
14.                         + "&blobConcept=PR_Equipment" //概念名
    
15.                         + "&blobRelation=fQRCode" //关系名
    
16.                         + "&blobConceptValue="
    
17.                         + r.getValue("PR_Equipment")
    
18.                         + "&$query-version="
    
19.                         + com.justep.system.util.CommonUtils.createGUID()
    
20.                         + "&bsessionid="
    
21.                         + ActionUtils.getRequestContext().getSessionContext().getSessionID();
    
22. 
    
23.                         r.setString("fRemark", url); //将url存入table对象，不用增加一个专门的url关系，随便设到一个不需要在报表中显示的关系中即可
    
24.                 }
    
25.                 return t;
    
26.         }
    

复制代码

wuxing

整理的很全，感谢分享

郭德成

很好，留个标记，要换了是我来做这个功能，肯定是在数据库里用一个字段，然后将这个字段通过JS生成二维码

cactus78

郭德成 发表于 2016-10-6 20:16
很好，留个标记，要换了是我来做这个功能，肯定是在数据库里用一个字段，然后将这个字段通过JS生成二维码 ...

是的，那样会好一点，以前没弄过，没经验。一开始思路是这样的，就按这个思路做了，结果遇到了一系列问题，正好借这个机会了解了blobImage的原理。
如果直接存储二维码信息的话，好像报表有个显示模式是二维码，不知道好用不。
如果不需要使用报表的话，二维码信息一般都是由其他字段组合而成的，就连字段都不用了。直接在前端组合再生成二维码，更简单，还方便修改。不过这样没弄过，哪位大侠弄过可以分享一下，大家参考。

sweetluo

Uncaught TypeError: Cannot read property 'toDataURL' of undefined

这个是怎么回事呢？

Masion

sweetluo 发表于 2017-3-10 22:23
Uncaught TypeError: Cannot read property 'toDataURL' of undefined

这个是怎么回事呢？

估计你是有什么地方拼写错误

sweetluo

这个位置没有太多的代码，照着他抄的，就是不行

// 初始化生成二维码
                        var q= this.getElementByXid('qrcode');               
                        $(q).qrcode({
                        render : "img", //渲染方式
                        text : this.comp("userData").val("userTj"), //url地址
                        height : 250,
                        width : 250,
                        src : imgurl //头像地址
                        });
                        //生成下载
                                /*
                                //var canvas  = document.getElementById("ex1");
                                //var dataUrl = canvas.toDataURL();
                                //var pixels = new Uint8Array(canvas.width * canvas.height * 4);
                                //gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

                                var cavas = q.children[0];
                var imgUrl = cavas.toDataURL("image/png"); //此处报错
                var a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                a.href = imgUrl;
                a.download = "123";
                a.innerHTML = "下载图片"
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                a.dispatchEvent(event);
                                */

cactus78

sweetluo 发表于 2017-3-11 09:25
这个位置没有太多的代码，照着他抄的，就是不行

// 初始化生成二维码

1、你这个主要问题是第3行，应该是  render :"canvas",  canvas是HTML5的元素，才有toDataURl()方法，img没有这个方法。
2、还有第一行后面应该有q.innerHTML = "";否则第二次生成的二维码会在第一次生成的后面，第一次生成的不会消失。直接的后果是 var cavas = q.children[0] 永远得到的是第一次生成的。
3、你的src : imgurl 不知道这个变量imgurl之前定义过没有，否则也应该会报错。

sweetluo

谢谢，现在电脑上不报错了，但手机上还是不行，UC，微信都报错

sweetluo

var imgurl=this.comp("userData").val("userPhoto");
                        if(imgurl==null || imgurl==""){imgurl="./intro/img/ico96-96.png";};
                        if(imgurl.substring(0,4) == "http"){
                                imgurl="./intro/img/ico96-96.png";
                        }
                       
                        //生成下载
                               
                                var qrcodeElmt = this.getElementByXid("qrcode");//div的xid
                qrcodeElmt.innerHTML = "";
                $(qrcodeElmt).qrcode({
                                //render : "img", //渲染方式
                        render :"canvas",
                        text: this.comp("userData").val("userTj"), //url地址
                        height: 250,
                        width: 250,
                        src : imgurl //头像地址
                });

                var cavas = qrcodeElmt.children[0];
                var imgUrl = cavas.toDataURL("image/png");
                var a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                a.href = imgUrl;
                a.download = "tuijian";
                a.innerHTML = "下载二维码"
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                a.dispatchEvent(event);