artwlfeedback.js——仿google搜索结果页的“发送反馈”功能

缘起

　　不知道大家有没有用过google搜索结果页的“发送反馈”功能(还没有用过的，快去体验一下吧)，个人用过后觉得非常酷，特别适合反馈界面视觉问题，于是就有了本文介绍的小作品。

　　给不能FQ的截张图吧：

效果

　　不知道大家有没有注意到本页最下面有个“发送反馈”的固定链接，可以点击看看效果。下面是chrome下的效果：

　　注：需要浏览器支持HTML5

原理

　　通过查看google搜索结果页反馈时的代码可以看到，是把页面生成了一个canvas，然后在canvas上画矩形来实现的：

　　所以在不支持canvas的浏览器下，是没有这个效果的。

　　我的方案是利用html2canvas库把页面内容渲染成一个canvas，然后利用canvas的画图功能来做标记，然后把canvas转换为base64格式的图片用于发送反馈。

代码

　　代码比较简单，就是先用调用html2canvas库把页面转换成一个canvas，然后把这个canvas添加到页面上，然后再创建一个空白的canvas用于画标记(矩形)，添加一个空白的canvas的作用是如果标记有误方便清除。其他的就是canvas的画图的代码，最后当用户点击保存时合并前面创建的两个canvas，并利用canvas的toDataUrl方法把canvas转换为base64格式的png图片输出，后续的操作开发者就可以自己定义了。

　　JS代码如下(canvas画图的代码有参考 Javascript实现canvas画图功能 一文)：

var artwlfeedback = (function(){
    var load =function(callback){
        html2canvas(document.body, {
            onrendered: function(canvas) {
                canvas.id = "artwlfeedback_pagecanvas";
                var cv = document.createElement("canvas");
                cv.width = canvas.width;
                cv.height = canvas.height;
                cv.style.background = "#666";
                cv.id = "artwlfeedback_canvas";
                document.body.appendChild(cv);
                document.body.appendChild(canvas);
                init(callback);
            }
        });
    }

    var init = function(callback){
        var paint={
            init:function(){
                this.addDrawTool();
                this.load();
                this.bind();
            },
            addDrawTool: function(){
                var NewLine = '\n';
                var drawToolHtml = '';
                drawToolHtml+='    <div id="artwlfeedback_operate">'+NewLine;
                drawToolHtml+='        <input id="artwlfeedback_clear" type="button" value=" " title="clear"/>'+NewLine;
                drawToolHtml+='        <input id="artwlfeedback_cancel" type="button" value=" " title="cancel"/>'+NewLine;
                drawToolHtml+='        <input id="artwlfeedback_save" type="button" value=" " title="save as image" />'+NewLine;
                drawToolHtml+='    </div>'+NewLine;
                var drawToolNode = document.createElement("div");
                drawToolNode.id = "artwlfeedback_draw_tool";
                drawToolNode.className = "artwlfeedback";
                drawToolNode.innerHTML = drawToolHtml;
                document.body.appendChild(drawToolNode);
            },
            load:function(){
                this.x=[];//记录鼠标移动是的X坐标
                this.y=[];//记录鼠标移动是的Y坐标
                this.clickDrag=[];
                this.Rectangles = [];
                this.lock=false;//鼠标移动前，判断鼠标是否按下
                this.storageColor="#000000";
                this.$=function(id){return typeof id=="string"?document.getElementById(id):id;};
                this.canvas=this.$("artwlfeedback_canvas");
                this.pageCanvas = this.$("artwlfeedback_pagecanvas");
                this.cxt=this.canvas.getContext('2d');
                this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式
                this.cxt.lineWidth = 2;//线条的宽度
                this.iptClear=this.$("artwlfeedback_clear");
                this.cancel= this.$("artwlfeedback_cancel");
                this.saveAs = this.$("artwlfeedback_save");
                this.w=this.pageCanvas.width;//取画布的宽
                this.h=this.pageCanvas.height;//取画布的高
                this.touch =("createTouch" in document);//判定是否为手持设备
                this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代
                this.MoveEvent = this.touch ? "touchmove" : "mousemove";
                this.EndEvent = this.touch ? "touchend" : "mouseup";
                this.drawTool = this.$("artwlfeedback_draw_tool");
                this.callback = callback;
            },
            bind:function(){
                var t=this;
                /*清除画布*/
                this.iptClear.onclick=function(){
                    t.clear();
                    t.Rectangles.length = [];
                };
                this.cancel.onclick = function(){
                    t.removeNode(t.pageCanvas);
                    t.removeNode(t.canvas);
                    t.removeNode(t.drawTool);
                };
                /*保存*/
                this.saveAs.onclick = function(){
                    //创建新canvas用于合并pageCanvas和canvas
                    var saveCanvas = document.createElement('canvas');
                    saveCanvas.width = t.w;
                    saveCanvas.height = t.h;

                    var saveCxt = saveCanvas.getContext('2d');
                    saveCxt.fillStyle = "#666";
                    saveCxt.fillRect(0, 0, t.w, t.h);
                    saveCxt.globalAlpha=1;
                    saveCxt.drawImage(t.canvas, 0, 0);
                    saveCxt.globalAlpha=0.5;
                    saveCxt.drawImage(t.pageCanvas, 0, 0);

                    t.removeNode(t.pageCanvas);
                    t.removeNode(t.canvas);
                    t.removeNode(t.drawTool);

                    //输出图片
                    var imgData = saveCanvas.toDataURL("image/png");
                    if(t.callback){
                        callback(imgData);
                    } else {
                        var w=window.open('about:blank','image from canvas');
                        w.document.write("<img src='"+imgData+"' alt='from canvas'/>");
                    }
                };
                /*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/
                this.canvas['on'+t.StartEvent]=function(e){
                    var touch=t.touch ? e.touches[0] : e;
                    var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
                    t.movePoint(touch.clientX - touch.target.offsetLeft,touch.clientY - touch.target.offsetTop + scrollTop);//记录鼠标位置
                    t.lock=true;
                    t.drawTool.style.display = "none";
                };
                /*鼠标移动事件*/
                this.canvas['on'+t.MoveEvent]=function(e){
                    var touch=t.touch ? e.touches[0] : e;
                    if(t.lock)//t.lock为true则执行
                    {
                        var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点
                        var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
                        var _y=touch.clientY - touch.target.offsetTop + scrollTop;//鼠标在画布上的y坐标，以画布左上角为起点
                        t.movePoint(_x,_y,true);//记录鼠标位置
                        t.drawRectangle();
                    }
                };
                this.canvas['on'+t.EndEvent]=function(e)
                {
                    /*重置数据*/
                    t.lock=false;
                    t.Rectangles.push([t.x[0], t.y[0], t.x[t.x.length -1] - t.x[0], t.y[t.y.length -1] - t.y[0]]);
                    t.x=[];
                    t.y=[];
                    t.clickDrag=[];
                    t.drawTool.style.display = "block";
                };
            },
            movePoint:function(x,y,dragging){
                /*将鼠标坐标添加到各自对应的数组里*/
                this.x.push(x);
                this.y.push(y);
                this.clickDrag.push(y);
            },
            drawRectangle: function(){
                var width = this.x[this.x.length-1] - this.x[0],
                    height = this.y[this.y.length-1] - this.y[0];
                this.clear();
                var i = this.Rectangles.length;
                if(i){
                    for (i=i-1; i >= 0; i--) {
                        var rectangle = this.Rectangles[i],
                            r_x = rectangle[0],
                            r_y = rectangle[1],
                            r_width = rectangle[2],
                            r_height = rectangle[3];
                        this.cxt.strokeRect(r_x, r_y, r_width, r_height); // 只勾画出矩形的外框
                        this.cxt.fillStyle = "#FFFFFF";
                        this.cxt.fillRect(r_x, r_y, r_width, r_height); // 画出矩形并使用颜色填充矩形区域
                    };
                }
                this.cxt.strokeRect(this.x[0], this.y[0], width, height); // 只勾画出矩形的外框
                this.cxt.fillStyle = "#FFFFFF";
                this.cxt.fillRect(this.x[0], this.y[0], width, height); // 画出矩形并使用颜色填充矩形区域
            },
            clear:function(){
                this.cxt.clearRect(0, 0, this.w, this.h);//清除画布，左上角为起点
            },
            removeNode: function(node){
                node.parentNode.removeChild(node);
            }
        };
        paint.init();
    }

    return {
        load: load
    }
})();

调用

　　关于如何调用可参考这里：http://afeedback.duapp.com/

局限

　　由于html2canvas有跨域限制，所以如果页面用了不同域下的图片（如本文）就不能正常显示。

　　另外，由于html2canvas是根据HTML代码重新渲染成canvas，而有些css无法识别，会造成页面跟canvas上的不完全一致。

改进空间和后续计划

　　目前在不支持canvas的浏览器下没有任何效果，这个可改进为传统方式。

　　html2canvas的库比较大，后续会改进为当用户点击反馈链接时进行异步加载。

　　当然，大家在体验的过程中如果有什么意见和建议非常欢迎提出，一起完善。