javascript - HTML5 画布 base64

Question

我正在尝试将图像保存在特定的画布上并将其复制到另一个画布上。我使用 base64 编码将其保存为字符串。我的问题是我似乎在从编码到解码的过程中丢失了一些信息。我怎么能阻止这个？我也附上了图片

      SignatureCapture.js

            function SignatureCapture( canvasID ) {
this.touchSupported = Modernizr.touch;
this.canvasID = canvasID;
this.canvas = $("#"+canvasID);
this.context = this.canvas.get(0).getContext("2d"); 
this.context.strokeStyle = "#000000";
this.context.lineWidth = 1;
this.lastMousePoint = {x:0, y:0};

this.canvas[0].width = this.canvas.parent().innerWidth();

if (this.touchSupported) {
    this.mouseDownEvent = "touchstart";
    this.mouseMoveEvent = "touchmove";
    this.mouseUpEvent = "touchend";
}
else {
    this.mouseDownEvent = "mousedown";
    this.mouseMoveEvent = "mousemove";
    this.mouseUpEvent = "mouseup";
}

this.canvas.bind( this.mouseDownEvent, this.onCanvasMouseDown() );
    }

    SignatureCapture.prototype.onCanvasMouseDown = function () {
var self = this;
return function(event) {
    self.mouseMoveHandler = self.onCanvasMouseMove()
    self.mouseUpHandler = self.onCanvasMouseUp()

    $(document).bind( self.mouseMoveEvent, self.mouseMoveHandler );
    $(document).bind( self.mouseUpEvent, self.mouseUpHandler );

    self.updateMousePosition( event );
    self.updateCanvas( event );
}
       }

    SignatureCapture.prototype.onCanvasMouseMove = function () {
var self = this;
return function(event) {

    self.updateCanvas( event );
    event.preventDefault();
    return false;
}
    }

        SignatureCapture.prototype.onCanvasMouseUp = function (event) {
var self = this;
return function(event) {

    $(document).unbind( self.mouseMoveEvent, self.mouseMoveHandler );
    $(document).unbind( self.mouseUpEvent, self.mouseUpHandler );

    self.mouseMoveHandler = null;
    self.mouseUpHandler = null;
}
     }

      SignatureCapture.prototype.updateMousePosition = function (event) {
var target;
if (this.touchSupported) {
    target = event.originalEvent.touches[0]
}
else {
    target = event;
}

var offset = this.canvas.offset();
this.lastMousePoint.x = target.pageX - offset.left;
this.lastMousePoint.y = target.pageY - offset.top;

   }

   SignatureCapture.prototype.updateCanvas = function (event) {

this.context.beginPath();
this.context.moveTo( this.lastMousePoint.x, this.lastMousePoint.y );
this.updateMousePosition( event );
this.context.lineTo( this.lastMousePoint.x, this.lastMousePoint.y );
this.context.stroke();
    }

      SignatureCapture.prototype.toString22 = function () {

var dataString = this.canvas[0].toDataURL();
alert(dataString);
return dataString;




       }

     SignatureCapture.prototype.clear = function () {

var c = this.canvas[0];
this.context.clearRect( 0, 0, c.width, c.height );
      }

          main.js

    var sigCapture = null;

    $(document).ready(function(e) {

sigCapture = new SignatureCapture( "signature" );


$("#cancel").click( onCancelClick );
     });



    function onSC() {


    $("#feedback").html( "Tushar Babu23" );

    //var email = $("#email").val();
    var sig = sigCapture.toString22();
    console.log(sig)

    var img = new Image();
    img.src = sig;

    img.onload = function()
    {

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

    context.drawImage(img,0,0, 300,200);
    context.lineWidth = 5;
        }

        }

     function onCancelClick( event ) {
clearForm();
     }

    function clearForm() {
$("#email").val( "" );
sigCapture.clear();
$("#feedback").html( "" );
    }

   function requestSuccess( data, textStatus, jqXHR ) {
clearForm();
$("#feedback").html( "Thank you." );
   }

   function requestError( jqXHR, textStatus, errorThrown ) {
$("#feedback").html( "Error: " + errorThrown );
    }

   function verifyEmail() {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]                {1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test( $("#email").val() );
   }

            index.html


   <title>Signature Capture</title>

    <script src="js/jquery-1.7.min.js"></script>
    <script src="js/modernizr.custom.34982.js"></script>

       <script src="js/application 222222.js"></script>
       <script src="js/signatureCapture.js"></script>
    <link rel="stylesheet" href="assets/styles.css" />

     </head>

     <body>

<img src="assets/phonegap.png" />

<h2>SAMPLE FORM</h2>
<div></div>

<h2>EMAIL</h2>
<input id="email" type="email" />

<h2>SIGNATURE</h2>
<div id="canvasContainer" >
    <canvas id="signature" height="200px" />
</div>

<div  id="canvasContainer">
    <canvas  id="myCanvas" height="200px" />
</div>

<div id="lowerControls">
    <div id="feedback"></div>
    <div id="buttonsContainer">
        <input type="image" onclick="onSC()" src="assets/accept.png" />
        <input type="image" id="cancel" src="assets/cancel.png" />
    </div>
</div>

Answer 1

只需使用 dataString，而不是这个奇怪的 sig 东西。

img.src = dataString;
img.onload = function(){
    context.drawImage(img,0,0, 300,200);
}

两幅画布的尺寸是否完全相同？