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

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

hi i'm using ngfor create set of 3 slides while starting in middle i'm guaranteed able slide left or right on start. when slide right can simple listen reachedend , push slide array i'm looping. but have problem adding slide beginning. if same above , use e.g. array.unshift() or spread add item beginning, view think it's on position 0 , snaps view new slide. the code below work animates slide change index 1. slide = [0,1,2] //example loop slidechanged(event) { if(this.slides.isbeginning()){ this.slide = [this.slide[0]-1, ...this.slide]; this.slides.update(); this.slides.slideto(1) } } <ion-slides [initialslide]="1" (ionslidedidchange)="slidechanged($event)"> <ion-slide *ngfor="let item of slide"> <h1>slide {{item}}</h1> </ion-slide> </ion-slides> any appreciated! you can using ionslidenextend , ionslideprevend events slides . please...
Read more

Add a dynamic header in angular 2 http provider -

i have http interceptor built via tutorial https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2 the problem need have dynamic header changes automatically once changes 'mode' in app. service able tell interceptor change header, or have interceptor pull header (which string)from service each request. able throwing away patch method, call http.patch('new header string') set header string. call in service controls 'mode' setting. wondering if there way interceptor pull recent value service each request or if can add method http provider via interceptor? i've tried call service in interceptor each request returns undefined. because creating new instance of service or copying value before service fired , loaded/changed data. i don't want pass header string every http provider call because defeats purpose of having interceptor, id able set once changes or have provider fetch service before makes request. tl;dr : need add autom...
Read more

minify - Minimizing css files -

i want know how css files can minimized. currently, using external sites css minifier compress css files. however, after removing whitespaces, comments, etc, file sizes reduced 10-15%. how frameworks bootstrap manage make minimized versions kilobytes. as example, css is: body { background-color: #ff0; } the reduction goes 28 bytes 22 bytes other css files have lot more characters still smaller this. actually minifying code means it's remove thing code white space characters new line characters comments block delimiters it reduces amount of code has transferred on web , speed site load fastly.but unreadable format.
Read more