Question

我面临一个奇怪的问题，使用firefox for android和html5 canvas。

我有一个允许客户签名的表格。该表格将完美地用于说chrome（截图1），但会在客户尝试在Firefox for Android上签名时加扰。

签名板的JS代码来自http://www.zetakey.com/codesample-signature.php

js代码如下：

// JavaScript Document

function signatureCapture() {

    //Actual Code starts here

    var parent=document.getElementById("canvas");
    parent.childNodes[0].nodeValue = "";

    var canvasArea=document.createElement("canvas");
    canvasArea.setAttribute("id", "newSignature");
    parent.appendChild(canvasArea);

    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");

    if (!context) {
        throw new Error("Failed to get canvas' 2d context");
    }

    screenwidth = screen.width;

    //if (screenwidth < 480){
    //  canvas.width = screenwidth - 8 ;
    //  canvas.height = (screenwidth * 0.63) ;
    //}
    //else {
        canvas.width = 460 ;
        canvas.height = 300 ;
    //}

    context.fillStyle = "#fff";
    context.strokeStyle = "#444";
    context.lineWidth = 1.2;
    context.lineCap = "round";

    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "#3a87ad";
    context.strokeStyle = "#3a87ad";
    context.lineWidth = 1;
    context.moveTo((canvas.width*0.042),(canvas.height * 0.7));
    context.lineTo((canvas.width*0.958),(canvas.height * 0.7));
    context.stroke();

    context.fillStyle = "#fff";
    context.strokeStyle = "#444";


    var disableSave = true;
    var pixels = [];
    var cpixels = [];
    var xyLast = {};
    var xyAddLast = {};
    var calculate = false;

    //functions
    {
        function remove_event_listeners() {
            canvas.removeEventListener('mousemove', on_mousemove, false);
            canvas.removeEventListener('mouseup', on_mouseup, false);
            canvas.removeEventListener('touchmove', on_mousemove, false);
            canvas.removeEventListener('touchend', on_mouseup, false);

            document.body.removeEventListener('mouseup', on_mouseup, false);
            document.body.removeEventListener('touchend', on_mouseup, false);
        }

        function get_board_coords(e) {
            var x, y;

            if (e.changedTouches && e.changedTouches[0]) {
                var offsety = canvas.offsetTop || 0;
                var offsetx = canvas.offsetLeft || 0;

                x = e.changedTouches[0].pageX - offsetx;
                y = e.changedTouches[0].pageY - offsety;
            } else if (e.layerX || 0 == e.layerX) {
                x = e.layerX;
                y = e.layerY;
            } else if (e.offsetX || 0 == e.offsetX) {
                x = e.offsetX;
                y = e.offsetY;
            }

            return {
                x : x,
                y : y
            };
        };

        function on_mousedown(e) {
            e.preventDefault();
            e.stopPropagation();

            canvas.addEventListener('mousemove', on_mousemove, false);
            canvas.addEventListener('mouseup', on_mouseup, false);
            canvas.addEventListener('touchmove', on_mousemove, false);
            canvas.addEventListener('touchend', on_mouseup, false);

            document.body.addEventListener('mouseup', on_mouseup, false);
            document.body.addEventListener('touchend', on_mouseup, false);

            empty = false;
            var xy = get_board_coords(e);
            context.beginPath();
            pixels.push('moveStart');
            context.moveTo(xy.x, xy.y);
            pixels.push(xy.x, xy.y);
            xyLast = xy;
        };

        function on_mousemove(e, finish) {
            e.preventDefault();
            e.stopPropagation();

            var xy = get_board_coords(e);
            var xyAdd = {
                x : (xyLast.x + xy.x) / 2,
                y : (xyLast.y + xy.y) / 2
            };

            if (calculate) {
                var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                pixels.push(xLast, yLast);
            } else {
                calculate = true;
            }

            context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
            pixels.push(xyAdd.x, xyAdd.y);
            context.stroke();
            context.beginPath();
            context.moveTo(xyAdd.x, xyAdd.y);
            xyAddLast = xyAdd;
            xyLast = xy;

        };

        function on_mouseup(e) {
            remove_event_listeners();
            disableSave = false;
            context.stroke();
            pixels.push('e');
            calculate = false;
        };

    }//end

    canvas.addEventListener('mousedown', on_mousedown, false);
    canvas.addEventListener('touchstart', on_mousedown, false);
}

function signatureSave() {

    var canvas = document.getElementById("newSignature");
    // save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById("saveSignature").src = dataURL;


};
function signaturePost() {
    var canvas = document.getElementById("newSignature");
    // save canvas image as data url (png format by default)
    document.getElementById('postSignature').value = canvas.toDataURL('image/png');
    document.forms["submit_signature"].submit()

}

/*
Reload page instead of this function:

function signatureClear() {


    var parent=document.getElementById("canvas");
    var child=document.getElementById("newSignature");
    parent.removeChild(child);

    signatureCapture();


}
*/

// http://stackoverflow.com/questions/11385471/save-canvas-image-post-the-data-string-to-php


function signatureSend() {
    var canvas = document.getElementById("newSignature");
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById("saveSignature").src = dataURL;
    var sendemail = document.getElementById('sendemail').value;
    var replyemail = document.getElementById('replyemail').value;

var form = document.createElement("form");
form.setAttribute("action","upload_file.php");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("method","POST");
form.setAttribute("target","_self");
form.innerHTML = '<input type="text" name="image" value="'+dataURL+'"/>'+'<input type="email" name="email" value="'+sendemail+'"/>'+'<input type="email" name="replyemail" value="'+replyemail+'"/>';
form.submit();
}

我已经实现了代码，它在Chrome chrome signature

中运行良好

但它在firefox中乱码

firefox signature

我在运行android 4.1.2的HUAWEI mediapad 10上使用firefox 29.0.1

有什么想法吗？

更新：这是一个小提琴，显示整个代码在工作： http://jsfiddle.net/3KHAf/

Answer 1

基于图像中的工件，我怀疑这是设备图形驱动程序代码和Firefox踩到它的错误。在移动世界中没有什么是闻所未闻的。或者它也可能是Firefox本身的错误，但我发现这个选项更不可能。

我建议采取以下步骤

检查您是否可以在其他Android设备上重复此问题
将导致图形工件的代码隔离到jsfiddle.net测试用例，其中只有源代码行触发问题。分享其他人的链接以测试问题。
报告针对Firefox Mobile https://bugzilla.mozilla.org/

如果这个bug出现在Mozilla的一边并且它是可重复的，那么它们通常会很快得到修复。

#mobile上有一个irc.mozilla.org频道，您可以在此寻求进一步的帮助。

在Firefox Mobile，HUAWEI Mediapad 10，Android 4.1.2 </canvas>上，<canvas>绘图已损坏

1 个答案: