Javascript HTML5画布base64

我试图在局部画布上保存一个图像，然后在另一个画布上复制它。我使用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>

SignatureCapture.js
功能签名许可证（canvasID）{
this.touchSupported=modernizer.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（）；
如果（支持此.touch）{
this.mouseDownEvent=“touchstart”；
this.mousemovevent=“touchmove”；
this.mouseUpEvent=“touchend”；
}
否则{
this.mouseDownEvent=“mousedown”；
this.mousemovevent=“mousemove”；
this.mouseUpEvent=“mouseup”；
}
this.canvas.bind（this.mouseDownEvent，this.onCanvasMouseDown（））；
}
SignatureCapture.prototype.onCanvasMouseDown=函数（）{
var self=这个；
返回函数（事件）{
self.mouseMoveHandler=self.onCanvasMouseMove（）
self.mouseuphHandler=self.onCanvasMouseUp（）
$（document）.bind（self.mousemovevent，self.mouseMoveHandler）；
$（document）.bind（self.mouseUpEvent，self.mouseUpHandler）；
self.updateMousePosition（事件）；
self.updateCanvas（事件）；
}
}
SignatureCapture.prototype.onCanvasMouseMove=函数（）{
var self=这个；
返回函数（事件）{
self.updateCanvas（事件）；
event.preventDefault（）；
返回false；
}
}
SignatureCapture.prototype.onCanvasMouseUp=函数（事件）{
var self=这个；
返回函数（事件）{
$（文档）.unbind（self.mousemovevent，self.mouseMoveHandler）；
$（文档）.unbind（self.mouseUpEvent，self.mouseUpHandler）；
self.mouseMoveHandler=null；
self.mouseHandler=null；
}
}
SignatureCapture.prototype.updateMousePosition=函数（事件）{
var目标；
如果（支持此.touch）{
target=event.originalEvent.touchs[0]
}
否则{
目标=事件；
}
var offset=this.canvas.offset（）；
this.lastMousePoint.x=target.pageX-offset.left；
this.lastMousePoint.y=target.pageY-offset.top；
}
SignatureCapture.prototype.updateCanvas=函数（事件）{
this.context.beginPath（）；
this.context.moveTo（this.lastMousePoint.x，this.lastMousePoint.y）；
此.updateMousePosition（事件）；
this.context.lineTo（this.lastMousePoint.x，this.lastMousePoint.y）；
this.context.stroke（）；
}
SignatureCapture.prototype.ToString 22=函数（）{
var dataString=this.canvas[0].toDataURL（）；
警报（数据串）；
返回数据串；
}
SignatureCapture.prototype.clear=函数（）{
var c=this.canvas[0]；
this.context.clearRect（0，0，c.width，c.height）；
}
main.js
var-sigCapture=null；
$（文档）.ready（函数（e）{
sigCapture=新签名许可证（“签名”）；
$（“#取消”）。单击（onCancelClick）；
});
函数onSC（）{
$（“#反馈”）.html（“Tushar Babu23”）；
//var email=$（“#email”）.val（）；
var sig=sigCapture.toString22（）；
控制台日志（sig）
var img=新图像（）；
img.src=sig；
img.onload=函数（）
{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
drawImage（img，0,0300200）；
context.lineWidth=5；
}
}
函数onCancelClick（事件）{
clearForm（）；
}
函数clearForm（）{
$（“#email”）.val（“”）；
sigCapture.clear（）；
$（“#反馈”）.html（“”）；
}
函数requestSuccess（数据、文本状态、jqXHR）{
clearForm（）；
$（“#反馈”）.html（“谢谢”）；
}
函数requestError（jqXHR、textStatus、errorshown）{
$（“#反馈”）.html（“错误：+errorshown）；
}
函数verifyEmail（）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（$（“#email”）.val（））；
}
index.html
签名捕获
样本表格
电子邮件
签名

---

只需使用dataString，而不是wierd-sig

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

---

两张画布的大小是否完全相同？

只需使用dataString，而不是wierd sig

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

---

这两个画布的大小是否完全相同？

SigCapture.toString只是一个函数，它返回“dataString”我的源代码-代码看起来基本上很好。你可以从这两个基本的小提琴中看出，它工作得很好。我在SignatureCapture代码中看到线宽设置为1。也许这和像素被跟踪的方式引发了某种舍入错误，导致像素丢失。对不起，我对没有正确缩进的代码不太感兴趣。我想解决方案对你来说比我更重要。在这个问题上花点功夫。SigCapture.toString只是一个返回“dataString”的函数，我的源代码看起来基本上很好。你可以从这两个基本的小提琴中看出，它工作得很好。我在SignatureCapture代码中看到线宽设置为1。也许这和像素被跟踪的方式引发了某种舍入错误，导致像素丢失。对不起，我对没有正确缩进的代码不太感兴趣。我想解决方案对你来说比我更重要。对这个问题投入一些精力。是的，它们是，并且dataString是由另一个函数返回的，应该尝试iti。我按照您的要求做了，图像只正确出现，但问题仍然存在……尝试使用context.drawImage（img，0,0）；并检查图像的大小。我认为它可能比画布小。我也这么做了，大小超出了画布的界限，只有使用.toDataURL（）t时，300200才是正确的