javascript - canvas todataurl corrupted images -


i have app allow users sign document, drawing sign in canvas.

function initialize(xsize, ysize) {          // references canvas element 2d drawing context          sigcanvas = document.getelementbyid("canvassignature");          sigcanvas.width = xsize;          sigcanvas.height = ysize;          var context = sigcanvas.getcontext("2d");          context.strokestyle = 'black';          // defined on touch device such ipad or android, etc.          var is_touch_device = 'ontouchstart' in document.documentelement;           if (is_touch_device) {             // create drawer tracks touch movements             var drawer = {                isdrawing: false,                touchstart: function (coors) {                   context.beginpath();                   context.moveto(coors.x, coors.y);                   this.isdrawing = true;                },                touchmove: function (coors) {                   if (this.isdrawing) {                      context.lineto(coors.x, coors.y);                      context.stroke();                   }                },                touchend: function (coors) {                   if (this.isdrawing) {                      this.touchmove(coors);                      this.isdrawing = false;                   }                }             };

then use todataurl image canvas , save in local storage. 

function save_canvas(index) {            sigcanvas = document.getelementbyid("canvassignature");           var img = sigcanvas.todataurl('image/jpeg');            window.localstorage.setitem("fm"+ index, img);           sigcanvas.width = sigcanvas.width;       }

now export sign in pdf using jspdf. should use jpeg images on png i'm using todataurl('image,jpeg'). when retake image localstorage, 

function firma(titlenum) {     canvasnum = titlenum;     xcoord = (window.event.clientx-50);     ycoord = (window.event.clienty-50);     idsign = "fm" + titlenum;     var img_firma = window.localstorage.getitem(idsign);     if (null != img_firma && img_firma != "") {         alert(img_firma);         $('#pagesign').hide();         $('#pagesignimg').show();          var toappend = new image;         toappend.title = 'firma';         toappend.src = img_firma;         toappend.classname = "imgfirma";         $('#div_firmaimg').empty();         document.getelementbyid('div_firmaimg').appendchild(toappend);         document.getelementbyid('signnascosteimg').click();     } else {         alert(img_firma);         $('#pagesign').show();          $('#pagesignimg').hide();         initialize(0, 0);         document.getelementbyid(idsign).classname = "editsign";         document.getelementbyid('signnascoste').click();     }    }

the base64 results corrupted this:

data:image/jpeg;base64,/9j/4aaqskzjrgabaqaaaqabaad/2wbdaaicagicaqicagicagidawyeawmdawcfbqqgcacicaghcagjcg0lcqkmcggicw8lda0odg4ocqsqeq8oeq0odg7/2wbdaqicagmdawyebayocqgjdg4odg4odg4odg4odg4odg4odg4odg4odg4odg4odg4odg4odg4odg4odg4odg4odg7/waarcakgbradasiaahebaxeb/8qahwaaaqubaqebaqeaaaaaaaaaaaecawqfbgcicqol/8qatraaagedawieawufbaqaaaf9aqidaaqrbrihmuege1fhbyjxfdkbkaeii0kxwrvs0fakm2jyggkkfhcygroljicokso0nty3odk6q0rfrkdisuptvfvwv1hzwmnkzwznaglqc3r1dnd4exqdhiwgh4ijipktljwwl5izmqkjpkwmp6ipqrkztlw2t7i5usldxmxgx8jjytlt1nxw19jz2uhi4+tl5ufo6erx8vp09fb3+pn6/8qahweaawebaqebaqebaqaaaaaaaaecawqfbgcicqol/8qatreaagecbaqdbacfbaqaaqj3aaecaxeebsexbhjbuqdhcrmimoeifekrobhbcsmzuvavynlrchyknoel8rcygromjygpkju2nzg5okneruzhselku1rvvldywvpjzgvmz2hpann0dxz3ehl6gooehyahiimkkpoulzaxmjmaoqokpaanqkmqsro0tba3ulm6wspexcbhymnk0tpu1dbx2nna4upk5ebn6onq8vp09fb3+pn6/9oadambaairaxeapwd+f+iiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooakkkkaciiigaooooak

i can't understand why....


Comments

Post a Comment

Popular posts from this blog

monitor web browser programmatically in Android? -

i've got tricky question here. need users make payment bank (namely barclaycard) in uk. so, have https url , add parameters (such amount pay, order reference, etc) url, start http connection intent.actionview, redirect user browser can enter credit card details on bank's webpage , make payment our account successfully. far ? the code use below (i changed values privacy reasons) problem is, need app when user has completed/failed/cancelled payment. barclaycardautomatically redirects particular url when payment has succeeded, 1 if failed. there no way of knowing when barclaycard payment has succeeded go android app somehow ? button cardbutton = (button) findviewbyid(r.id.card_button); cardbutton.setonclicklistener(new view.onclicklistener() { @override public void onclick(view arg0) { string prehashstring = new string(); string prohashstring = new string(); string shapassphrase = new string(); shapassphrase = "gsvth£h70zkh...
Read more

Shrink a YouTube video to responsive width -

i have youtube video embedded on our website , when shrink screen tablet or phone sizes stops shrinking @ around 560px in width. standard youtube videos or there can add code make go smaller? you can make youtube videos responsive css. wrap iframe in div class of "videowrapper" , apply following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } the .videowrapper div should inside responsive element. padding on .videowrapper necessary keep video collapsing. may have tweak numbers depending upon layout.
Read more

wpf - PdfWriter.GetInstance throws System.NullReferenceException -

i'm trying create pdf document using itextsharp 5.3.4 using following document document = new document(); filestream stm = new filestream(filename, filemode.create); pdfwriter writer = pdfwriter.getinstance(document, stm); i'm getting system.nullreferenceexception following stack trace: system.nullreferenceexception occurred hresult=-2147467261 message=la référence d'objet n'est pas définie à une instance d'un objet. source=itextsharp stacktrace: à itextsharp.text.version.getinstance() innerexception: i've verified neither document nor stm null, , if select "continue" in vs12 document created - exception thrown. updated itextsharp 5.4.0 , it's still occurring. can't find information on anywhere - got ideas? make sure not catching exceptions. nullreferenceexception can 1 caught , handled inside itextsharp, don't care it. fact can continue supports theory. change following setting verify: debug -> exceptions ...
Read more