javascript - Canvas window.addEvent error when running on gh-pages -
i have html5 canvas project allows uploading of image canvas. variously drawn on.
i can run project locally with
$ http-server running locally, don't errors.
the project on github
the issue in gh-pages error,
uncaught typeerror: window.addevent not function @ (index):22 line 22 is,
window.addevent('load', function() { this problem when trying run snippet tool.
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="https://rawgit.com/eligrey/filesaver.js/master/filesaver.js"></script> <script src="https://rawgit.com/eligrey/canvas-toblob.js/master/canvas-toblob.js"></script> <script type="text/javascript"> var pts = []; var dist; let inputvalue; var ratio; var angle; window.addevent('load', function() { var imageloader = document.getelementbyid('imageloader'); imageloader.addeventlistener('change', handleimage, false); var c = document.getelementbyid('canvas'); var ctx = c.getcontext('2d'); function handleimage(e) { var reader = new filereader(); reader.onload = function(event) { var img = new image(); img.onload = function() { c.width = img.width; c.height = img.height; ctx.drawimage(img, 0, 0); } img.src = event.target.result; } reader.readasdataurl(e.target.files[0]); } $("#canvas").click(function(e) { getposition(e); }); }); var pointsize = 3; // event click event can retrieved first parameter in addeventlistener(function(event){}); or in jquery $("selector").click(function(event){}); function getposition(event) { var rect = canvas.getboundingclientrect(); var x = event.clientx - rect.left; // x == location of click in document - location (relative left) of canvas in document var y = event.clienty - rect.top; // y == location of click in document - location (relative top) of canvas in document pts.push({ x: x, y: y }); if (pts.length == 2) { dist = getdistance(); addinput(pts[1].x, pts[1].y); } drawcoordinates(x, y); if (pts.length % 2 == 0) { drawline(pts[pts.length - 2].x, pts[pts.length - 2].y, pts[pts.length - 1].x, pts[pts.length - 1].y); }; } function decimaladjust(type, value, exp) { // if exp undefined or zero... if (typeof exp === 'undefined' || +exp === 0) { return math[type](value); } value = +value; exp = +exp; // if value not number or exp not integer... if (isnan(value) || !(typeof exp === 'number' && exp % 1 === 0)) { return nan; } // if value negative... if (value < 0) { return -decimaladjust(type, -value, exp); } // shift value = value.tostring().split('e'); value = math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); // shift value = value.tostring().split('e'); return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); } // decimal round if (!math.round10) { math.round10 = function(value, exp) { return decimaladjust('round', value, exp); }; } function getdistance() { dist = math.sqrt(math.pow(math.abs(pts[pts.length - 2].x - pts[pts.length - 1].x), 2) + math.pow(math.abs(pts[pts.length - 2].y - pts[pts.length - 1].y), 2)); return dist.tofixed(2); } function drawline(x1, y1, x2, y2) { var ctx = document.getelementbyid("canvas").getcontext("2d"); ctx.beginpath(); ctx.moveto(x1, y1); ctx.lineto(x2, y2); if (pts.length < 3) { ctx.strokestyle = 'blue'; } else { ctx.strokestyle = 'black'; } ctx.stroke(); dist = getdistance(); txt = dist * ratio; if (pts.length > 2) { drawtext(txt, x1, y1, x2, y2); } } function addinput(x, y) { var input = document.createelement('input'); input.type = 'text'; input.style.position = 'fixed'; input.style.left = (x + 4) + 'px'; input.style.top = (y + 4) + 'px'; input.onkeydown = handleenter; document.body.appendchild(input); input.focus(); hasinput = true; } function handleenter(e) { var keycode = e.keycode; if (keycode === 13) { inputvalue = this.value; document.body.removechild(this); hasinput = false; ratio = inputvalue / dist; if (pts.length == 2) { drawtext("reference line = " + dist * ratio, pts[pts.length - 2].x, pts[pts.length - 2].y, pts[pts.length - 1].x, pts[pts.length - 1].y); } } } function drawcoordinates(x, y) { var pointsize = 3; // change according size of point. var ctx = document.getelementbyid("canvas").getcontext("2d"); if (pts.length < 3) { ctx.fillstyle = "blue"; // red color } else { ctx.fillstyle = "red"; // red color } ctx.beginpath(); //start path ctx.arc(x, y, pointsize, 0, math.pi * 2, true); // draw point using arc function of canvas point structure. ctx.fill(); // close path , fill. } function drawtext(txt, x1, y1, x2, y2) { // (x,y) coordinate of text mid way between both points x = ((x2 + x1) / 2) + 5; y = ((y2 + y1) / 2) + 5; var ctx = document.getelementbyid("canvas").getcontext("2d"); ctx.save(); ctx.textbaseline = 'top'; ctx.textalign = 'left'; // ctx.font = font; angle = math.atan((math.abs(y2 - y1)) / (math.abs(x2 - x1))); console.log(angle); ctx.translate(x, y) // ctx.rotate(-1 * angle); ctx.filltext(txt, 0, 0); ctx.restore(); } function download_image() { // dump canvas contents file. var canvas = document.getelementbyid("canvas"); var today = new date(); var date = today.getfullyear() + "" + (today.getmonth() + 1) + "" + "" + today.getdate() + "" + (today.gethours() - 2) + "" + today.getminutes() + "" + today.getseconds(); today.getdate(); canvas.toblob(function(blob) { saveas(blob, date + "canvas.png"); }, "image/png"); }; </script> </head> <style media="screen"> upload_form { background-color: red; width: 100%; padding: 20px; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-12 upload_form"> <label>image file:</label><br/> <input type="file" id="imageloader" name="imageloader" /> <button type="button" onclick="download_image()" name="button">save canvas</button> </div> </div> <div class=row> <div class="col-md-12"> <canvas id="canvas"></canvas> </div> </div> </div> </body> </html>any appreciated,
thanks
i'm not sure why works http-server, should using window.addeventlistener instead of window.addevent
Comments
Post a Comment