i have .php file javascript calls canvas draw, upon submitting form upload canvas draw image , submit sql data database. 100% of time sql data uploaded. problem javascript not upload. browser mobile safari on ipad. assistance appreciated. below file captures image. uploads upload_data.php. using codeigniter framework.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>trailer draw</title> <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(document).ready(function () { initialize(); }); // works out x, y position of click inside canvas x, y position on page function getposition(mouseevent, sigcanvas) { var x, y; if (mouseevent.pagex != undefined && mouseevent.pagey != undefined) { x = mouseevent.pagex; y = mouseevent.pagey; } else { x = mouseevent.clientx + document.body.scrollleft + document.documentelement.scrollleft; y = mouseevent.clienty + document.body.scrolltop + document.documentelement.scrolltop; } return { x: x - sigcanvas.offsetleft, y: y - sigcanvas.offsettop }; } function initialize(canvas, context, onload) { // references canvas element 2d drawing context var sigcanvas = document.getelementbyid("canvassignature"); var context = sigcanvas.getcontext("2d"); context.strokestyle = 'red'; make_base(); function make_base(){ base_image = new image(); base_image.src = '/inc/img/inspection/trailer.png'; base_image.onload = function(){ context.drawimage(base_image, 2, 100); } } // defined ipad 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; } } }; // create function pass touch events , coordinates drawer function draw(event) { // touch coordinates. using first touch in case of multi-touch var coors = { x: event.targettouches[0].pagex, y: event.targettouches[0].pagey }; // need offset of canvas location var obj = sigcanvas; if (obj.offsetparent) { // every time find new object, add offsetleft , offsettop curleft , curtop. { coors.x -= obj.offsetleft; coors.y -= obj.offsettop; } // while loop can "while (obj = obj.offsetparent)" only, return null // when null passed back, creates warning in editors (i.e. vs2010). while ((obj = obj.offsetparent) != null); } // pass coordinates appropriate handler drawer[event.type](coors); } // attach touchstart, touchmove, touchend event listeners. sigcanvas.addeventlistener('touchstart', draw, false); sigcanvas.addeventlistener('touchmove', draw, false); sigcanvas.addeventlistener('touchend', draw, false); // prevent elastic scrolling sigcanvas.addeventlistener('touchmove', function (event) { event.preventdefault(); }, false); } else { // start drawing when mousedown event fires, , attach handlers // draw line wherever mouse moves $("#canvassignature").mousedown(function (mouseevent) { var position = getposition(mouseevent, sigcanvas); context.moveto(position.x, position.y); context.beginpath(); // attach event handlers $(this).mousemove(function (mouseevent) { drawline(mouseevent, sigcanvas, context); }).mouseup(function (mouseevent) { finishdrawing(mouseevent, sigcanvas, context); }).mouseout(function (mouseevent) { finishdrawing(mouseevent, sigcanvas, context); }); }); } } // draws line x , y coordinates of mouse event inside // specified element using specified context function drawline(mouseevent, sigcanvas, context) { var position = getposition(mouseevent, sigcanvas); context.lineto(position.x, position.y); context.stroke(); } // draws line last coordiantes in path finishing // coordinates , unbind event handlers need preceded // mouse down event function finishdrawing(mouseevent, sigcanvas, context) { // draw line finishing coordinates drawline(mouseevent, sigcanvas, context); context.closepath(); // unbind events draw $(sigcanvas).unbind("mousemove") .unbind("mouseup") .unbind("mouseout"); } </script> <div> </div> <script> function uploadex() { var canvas = document.getelementbyid("canvassignature"); var dataurl = canvas.todataurl("image/png"); document.getelementbyid('hidden_data').value = dataurl; var fd = new formdata(document.forms["form"]); var xhr = new xmlhttprequest(); xhr.open('post', '/inc/img/inspection/upload_data.php', true); xhr.upload.onprogress = function(e) { if (e.lengthcomputable) { var percentcomplete = (e.loaded / e.total) * 100; console.log(percentcomplete + '% uploaded'); //alert('succesfully uploaded'); } }; xhr.onload = function() { }; xhr.send(fd); return false; }; </script> </head> <style> input { margin-left: 200cm; } </style> <body> <h1>trailer inspection</h1> <div id="canvasdiv" align="center"> <!-- it's bad practice (to me) put css here. i'd recommend use of css file! --> <canvas id="canvassignature" width="955px" height="465px" style="border:2px solid #000000;"></canvas> </div> <p><h2></h2></p> <p><h4></h4></p> <?php if( !empty($table)): ?> <p><h3></h3></p> <?php if(is_array($table)): ?> <?php foreach($table $h1 => $t1): ?> <?php if( !is_int($h1)): ?> <p><h3><?php echo $h1; ?></h3></p> <?php else: ?> <br /> <?php endif; ?> <?php if(is_array($t1)): ?> <?php foreach($t1 $h2 => $t2): ?> <?php if( !is_int($h2)): ?> <p><h4><?php echo $h2; ?></h4></p> <?php else: ?> <br /> <?php endif; ?> <?php echo $t2; ?> <?php endforeach; ?> <?php else: ?> <?php echo $t1; ?> <?php endif; ?> <?php endforeach; ?> <?php else: ?> <?php echo $table;?> <?php endif; ?> <?php else: ?> <?php endif; ?> <br /> <?php if( !function_exists('form_open')): ?> <?php $this->load->helper('form'); ?> <?php endif;?> <form onsubmit="uploadex();" name="form" id="form" accept-charset="utf-8" method="post"> <input name="hidden_data" id="hidden_data" type="hidden" /> <?php $this->load->helper('string');?> <?php $number = random_string('unique');?> <input name="sub_id" id="sub_id" type="hidden" value="<?php echo $number; ?>"/> <div> <?php if( !empty($options1) , !empty($label_display1) , !empty($field_name1)): ?> <?php echo form_label($label_display1.":",$field_name1); ?> <?php echo form_dropdown($field_name1,$options1)?> <?php endif; ?> <?php echo form_label('carrier code','car_code'); ?> <?php echo form_input(array('name'=>'car_code','type'=>'text')); ?> <?php echo form_label('trailer number','trlr_num'); ?> <?php echo form_input(array('name'=>'trlr_num','type'=>'text')); ?> <?php echo form_label('truck number','truck_num'); ?> <?php echo form_input(array('name'=>'truck_num','type'=>'text')); ?> <?php echo form_label('temp','temp'); ?> <?php echo form_input(array('name'=>'temp','type'=>'text')); ?> <?php if( !empty($options) , !empty($label_display) , !empty($field_name)): ?> <?php echo form_label($label_display.":",$field_name); ?> <?php echo form_dropdown($field_name,$options)?> <?php endif; ?> <?php echo form_label('license plate','lic_plate'); ?> <?php echo form_input(array('name'=>'lic_plate','type'=>'text')); ?> <?php echo form_label('seal','seal'); ?> <?php echo form_input(array('name'=>'seal','type'=>'text')); ?> <?php echo form_label('stn/delivery note','del_note'); ?> <?php echo form_input(array('name'=>'del_note','type'=>'text')); ?> <?php echo form_label('ship number','ship_num'); ?> <?php echo form_input(array('name'=>'ship_num','type'=>'text')); ?> <input type="hidden" name="draw_num" id="draw_num" value="<?php echo $number; ?>" /> <?php echo form_label('driver name','driver_name'); ?> <?php echo form_input(array('name'=>'driver_name','type'=>'text')); ?> <?php echo form_label('check if live','live_drop'); ?> <?php echo form_checkbox(array('name'=>'live_drop','type'=>'checkbox','value'=>'1')); ?> <?php echo form_label('check if damaged','damaged'); ?> <?php echo form_checkbox(array('name'=>'damaged','type'=>'checkbox','value'=>'1')); ?> <?php echo form_label('comment','comment'); ?> <textarea class="txtarea" style="height:100px; width:350px;" rows="3" name="comment" id="comment" value=""> </textarea> <?php echo form_fieldset_close(); ?> </div> </br> </br> <input align="center" type ="submit" name="submit" onclick="uploadex();"> </input> </br> </br> </form> </body> </html> below upload_data.php
<?php $upload_dir = "upload/"; $img = $_post['hidden_data']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $id = $_post['sub_id']; $file = $upload_dir . $id . ".png"; $success = file_put_contents($file, $data); print $success ? $file : 'unable save file.'; ?>
once has onsubmit event in form, didn't need make second calling in submit button. in situation, onclick event in submit button can fired before onsubmit event causing fault.
furthermore, can try make xmlhttprequest synchronous in order avoid disordered execution of script sequence changing following parameter:
instead:
xhr.open('post', '/inc/img/inspection/upload_data.php', true); change to:
xhr.open('post', '/inc/img/inspection/upload_data.php', false); 