Color Picker Angular

I am trying to make comics generator, but when i try to pick the color of element, it sends me error

Error

code isn't mine, so it hard to understand the problem.

'use strict';
function Colors(){this.iPos=0,this.customRgbColor="",this.customColor="",this.aSets=new Array,this.aSets[1]=new Array,this.aSets[1][0]=[255,255,153],this.aSets[1][1]=[255,211,81],this.aSets[1][2]=[255,153,0],this.aSets[2]=new Array,this.aSets[2][0]=[102,204,255],this.aSets[2][1]=[10,169,254],this.aSets[2][2]=[1,107,186],this.aSets[3]=new Array,this.aSets[3][0]=[255,204,0],this.aSets[3][1]=[255,153,0],this.aSets[3][2]=[204,82,0],this.aSets[4]=new Array,this.aSets[4][0]=[255,102,0],this.aSets[4][1]=[204,82,0],this.aSets[4][2]=[157,63,0],this.aSets[5]=new Array,this.aSets[5][0]=[198,0,39],this.aSets[5][1]=[157,0,32],this.aSets[5][2]=[106,0,21],this.aSets[6]=new Array,this.aSets[6][0]=[106,0,21],this.aSets[6][1]=[53,0,11],this.aSets[6][2]=[0,0,0],this.aSets[7]=new Array,this.aSets[7][0]=[230,153,177],this.aSets[7][1]=[215,91,132],this.aSets[7][2]=[198,0,79],this.aSets[8]=new Array,this.aSets[8][0]=[221,0,88],this.aSets[8][1]=[155,0,62],this.aSets[8][2]=[113,0,45],this.aSets[9]=new Array,this.aSets[9][0]=[210,168,219],this.aSets[9][1]=[188,125,202],this.aSets[9][2]=[124,56,139],this.aSets[10]=new Array,this.aSets[10][0]=[90,46,90],this.aSets[10][1]=[62,32,62],this.aSets[10][2]=[47,23,47],this.aSets[11]=new Array,this.aSets[11][0]=[202,228,255],this.aSets[11][1]=[147,201,255],this.aSets[11][2]=[74,165,255],this.aSets[12]=new Array,this.aSets[12][0]=[0,34,153],this.aSets[12][1]=[0,24,98],this.aSets[12][2]=[0,10,40],this.aSets[13]=new Array,this.aSets[13][0]=[0,213,154],this.aSets[13][1]=[0,151,109],this.aSets[13][2]=[0,102,74],this.aSets[14]=new Array,this.aSets[14][0]=[172,206,121],this.aSets[14][1]=[131,175,65],this.aSets[14][2]=[85,113,43],this.aSets[15]=new Array,this.aSets[15][0]=[0,102,0],this.aSets[15][1]=[0,51,0],this.aSets[15][2]=[0,0,0],this.aSets[16]=new Array,this.aSets[16][0]=[216,173,109],this.aSets[16][1]=[200,141,53],this.aSets[16][2]=[145,102,38],this.aSets[17]=new Array,this.aSets[17][0]=[115,77,53],this.aSets[17][1]=[82,54,37],this.aSets[17][2]=[35,23,16],this.aSets[18]=new Array,this.aSets[18][0]=[68,46,32],this.aSets[18][1]=[35,23,16],this.aSets[18][2]=[0,0,0],this.aSets[19]=new Array,this.aSets[19][0]=[134,107,98],this.aSets[19][1]=[90,73,67],this.aSets[19][2]=[49,39,36],this.aSets[20]=new Array,this.aSets[20][0]=[138,60,60],this.aSets[20][1]=[97,41,41],this.aSets[20][2]=[74,32,32],this.aSets[21]=new Array,this.aSets[21][0]=[74,32,32],this.aSets[21][1]=[33,14,14],this.aSets[21][2]=[0,0,0],this.aSets[22]=new Array,this.aSets[22][0]=[153,153,153],this.aSets[22][1]=[102,102,102],this.aSets[22][2]=[51,51,51],this.aSets[23]=new Array,this.aSets[23][0]=[64,53,56],this.aSets[23][1]=[40,33,41],this.aSets[23][2]=[0,0,0]}function Head(t,o,s,e,a,r,i){this.x=t,this.y=o,this.x2=s,this.y2=e,this.w=a,this.h=r,this.image=i,this.iSpr=0}function Fringe(t,o,s,e,a,r,i){this.x=t,this.y=o,this.x2=s,this.y2=e,this.w=a,this.h=r,this.image=i,this.iSpr=0}function Eye(t,o,s,e,a,r,i){this.x=t,this.y=o,this.x2=s,this.y2=e,this.w=a,this.h=r,this.image=i,this.iSpr=0}function Eyebrow(t,o,s,e,a,r,i){this.x=t,this.y=o,this.x2=s,this.y2=e,this.w=a,this.h=r,this.image=i,this.iSpr=0}function Mouth(t,o,s,e,a,r,i){this.x=t,this.y=o,this.x2=s,this.y2=e,this.w=a,this.h=r,this.image=i,this.iSpr=0}function Top(t,o,s,e,a,r,i){this.x=t,this.y=o,this.x2=s,this.y2=e,this.w=a,this.h=r,this.image=i,this.iSpr=0}var mapApp=angular.module("mapApp",["colorpicker.module"]);mapApp.controller("mapController",["$scope","$interval","$timeout",function(k,t,i){k.state={section:1,skinColors:["fff0cc","ffd193","ffc8b0","eba769","ba805c","7a4f34"],canvas:null,ctx:null,canvas2:null,ctx2:null,oHead:null,oFringe:null,oEyebrow:null,oEye:null,oMouth:null,oTop:null,oColors:new Colors,oColorEyebrow:new Colors,oColorEye:new Colors,oColorTop:new Colors,oColorBack:new Colors,iSel:0},k.clear=function(){k.state.ctx.clearRect(0,0,k.state.ctx.canvas.width,k.state.ctx.canvas.height),k.state.ctx2.clearRect(0,0,k.state.ctx2.canvas.width,k.state.ctx2.canvas.height)},k.setPredefinedColor=function(t,o){switch(t){case 1:k.state.oColors.iPos=o,k.state.oColors.customColor=null,k.state.oColors.customRgbColor=null;break;case 2:k.state.oColorEyebrow.iPos=o,k.state.oColorEyebrow.customColor=null,k.state.oColorEyebrow.customRgbColor=null;break;case 3:k.state.oColorEye.iPos=o,k.state.oColorEye.customColor=null,k.state.oColorEye.customRgbColor=null;break;case 4:break;case 5:k.state.oColorTop.iPos=o,k.state.oColorTop.customColor=null,k.state.oColorTop.customRgbColor=null;break;case 6:break;case 7:k.state.oColorBack.iPos=o,k.state.oColorBack.customColor=null,k.state.oColorBack.customRgbColor=null}k.drawScene()},k.updateCustomColor=function(t){var o=0,s=0,e=0;switch(t){case 1:o=(a=k.state.oColors.customRgbColor.slice(4,-1).split(","))[0],s=a[1],e=a[2],k.state.oColors.customColor=[+o,+s,+e],k.state.oColors.iPos=0;break;case 2:o=(a=k.state.oColorEyebrow.customRgbColor.slice(4,-1).split(","))[0],s=a[1],e=a[2],k.state.oColorEyebrow.customColor=[+o,+s,+e],k.state.oColorEyebrow.iPos=0;break;case 3:o=(a=k.state.oColorEye.customRgbColor.slice(4,-1).split(","))[0],s=a[1],e=a[2],k.state.oColorEye.customColor=[+o,+s,+e],k.state.oColorEye.iPos=0;break;case 4:break;case 5:o=(a=k.state.oColorTop.customRgbColor.slice(4,-1).split(","))[0],s=a[1],e=a[2],k.state.oColorTop.customColor=[+o,+s,+e],k.state.oColorTop.iPos=0;break;case 6:break;case 7:var a;o=(a=k.state.oColorBack.customRgbColor.slice(4,-1).split(","))[0],s=a[1],e=a[2],k.state.oColorBack.customColor=[+o,+s,+e],k.state.oColorBack.iPos=0}k.drawScene()},k.drawScene=function(t){if(k.clear(),k.state.ctx.drawImage(k.state.oHead.image,k.state.oHead.x2+k.state.oHead.iSpr*k.state.oHead.w,k.state.oHead.y2,k.state.oHead.w,k.state.oHead.h,k.state.oHead.x,k.state.oHead.y,k.state.oHead.w,k.state.oHead.h),k.state.ctx.drawImage(k.state.oTop.image,k.state.oTop.x2+k.state.oTop.iSpr*k.state.oTop.w,k.state.oTop.y2,k.state.oTop.w,k.state.oTop.h,k.state.oTop.x,k.state.oTop.y,k.state.oTop.w,k.state.oTop.h),0<k.state.oColorTop.iPos||k.state.oColorTop.customRgbColor){var o=0,s=0,e=0;(y=k.state.oColorTop.iPos)&&(o=k.state.oColorTop.aSets[y][1][0],s=k.state.oColorTop.aSets[y][1][1],e=k.state.oColorTop.aSets[y][1][2]),k.state.oColorTop.customColor&&(o=k.state.oColorTop.customColor[0],s=k.state.oColorTop.customColor[1],e=k.state.oColorTop.customColor[2]);for(var a=0,r=(T=(I=k.state.ctx.getImageData(0,252,340,88)).data).length;a<r;a+=4)T[a]<253&&T[a+1]<253&&T[a+2]<253&&120<T[a]&&120<T[a+1]&&120<T[a+2]&&218!=T[a]&&218!=T[a+1]&&218!=T[a+2]&&(T[a]=o/255*T[a],T[a+1]=s/255*T[a+1],T[a+2]=e/255*T[a+2],T[a+3]=255);k.state.ctx.putImageData(I,0,252)}if(k.state.ctx.drawImage(k.state.oEyebrow.image,k.state.oEyebrow.x2+k.state.oEyebrow.iSpr*k.state.oEyebrow.w,k.state.oEyebrow.y2,k.state.oEyebrow.w,k.state.oEyebrow.h,k.state.oEyebrow.x,k.state.oEyebrow.y,k.state.oEyebrow.w,k.state.oEyebrow.h),0<k.state.oColorEyebrow.iPos||k.state.oColorEyebrow.customRgbColor){var i=0,l=0,h=0;(y=k.state.oColorEyebrow.iPos)&&(i=k.state.oColorEyebrow.aSets[y][1][0],l=k.state.oColorEyebrow.aSets[y][1][1],h=k.state.oColorEyebrow.aSets[y][1][2]),k.state.oColorEyebrow.customColor&&(i=k.state.oColorEyebrow.customColor[0],l=k.state.oColorEyebrow.customColor[1],h=k.state.oColorEyebrow.customColor[2]);for(a=0,r=(T=(I=k.state.ctx.getImageData(0,110,340,60)).data).length;a<r;a+=4)255==T[a]&&255==T[a+1]&&255==T[a+2]&&(T[a]=i/255*T[a],T[a+1]=l/255*T[a+1],T[a+2]=h/255*T[a+2],T[a+3]=255);k.state.ctx.putImageData(I,0,110)}if(k.state.ctx.drawImage(k.state.oEye.image,k.state.oEye.x2+k.state.oEye.iSpr*k.state.oEye.w,k.state.oEye.y2,k.state.oEye.w,k.state.oEye.h,k.state.oEye.x,k.state.oEye.y,k.state.oEye.w,k.state.oEye.h),0<k.state.oColorEye.iPos||k.state.oColorEye.customRgbColor){var c=0,n=0,C=0;(y=k.state.oColorEye.iPos)&&(c=k.state.oColorEye.aSets[y][1][0],n=k.state.oColorEye.aSets[y][1][1],C=k.state.oColorEye.aSets[y][1][2]),k.state.oColorEye.customColor&&(c=k.state.oColorEye.customColor[0],n=k.state.oColorEye.customColor[1],C=k.state.oColorEye.customColor[2]);for(a=0,r=(T=(I=k.state.ctx.getImageData(90,130,160,100)).data).length;a<r;a+=4)T[a]<253&&T[a+1]<253&&T[a+2]<253&&120<T[a]&&120<T[a+1]&&120<T[a+2]&&218!=T[a]&&218!=T[a+1]&&218!=T[a+2]&&(T[a]=c/255*T[a],T[a+1]=n/255*T[a+1],T[a+2]=C/255*T[a+2],T[a+3]=255);k.state.ctx.putImageData(I,90,130)}if(0<k.state.oColorBack.iPos||k.state.oColorBack.customRgbColor){var u=0,S=0,w=0;(y=k.state.oColorBack.iPos)&&(u=k.state.oColorBack.aSets[y][1][0],S=k.state.oColorBack.aSets[y][1][1],w=k.state.oColorBack.aSets[y][1][2]),k.state.oColorBack.customColor&&(u=k.state.oColorBack.customColor[0],S=k.state.oColorBack.customColor[1],w=k.state.oColorBack.customColor[2]);for(a=0,r=(T=(I=k.state.ctx.getImageData(0,0,340,340)).data).length;a<r;a+=4)254==T[a]&&254==T[a+1]&&254==T[a+2]&&(T[a]=u,T[a+1]=S,T[a+2]=w,T[a+3]=255);k.state.ctx.putImageData(I,0,0)}if(k.state.ctx2.drawImage(k.state.oFringe.image,k.state.oFringe.x2+k.state.oFringe.iSpr*k.state.oFringe.w,k.state.oFringe.y2,k.state.oFringe.w,k.state.oFringe.h,k.state.oFringe.x,k.state.oFringe.y,k.state.oFringe.w,k.state.oFringe.h),0<k.state.oColors.iPos||k.state.oColors.customRgbColor){var y,m=0,g=0,p=0,b=0,E=0,d=0,x=0,f=0,v=0;(y=k.state.oColors.iPos)&&(m=k.state.oColors.aSets[y][0][0],g=k.state.oColors.aSets[y][0][1],p=k.state.oColors.aSets[y][0][2],b=k.state.oColors.aSets[y][1][0],E=k.state.oColors.aSets[y][1][1],d=k.state.oColors.aSets[y][1][2],x=k.state.oColors.aSets[y][2][0],f=k.state.oColors.aSets[y][2][1],v=k.state.oColors.aSets[y][2][2]),k.state.oColors.customColor&&(m=k.state.oColors.customColor[0],g=k.state.oColors.customColor[1],p=k.state.oColors.customColor[2],b=parseInt(k.state.oColors.customColor[0]/1.3),E=parseInt(k.state.oColors.customColor[1]/1.3),d=parseInt(k.state.oColors.customColor[2]/1.3),x=parseInt(k.state.oColors.customColor[0]/1.7),f=parseInt(k.state.oColors.customColor[1]/1.7),v=parseInt(k.state.oColors.customColor[2]/1.7));var I,T;for(a=0,r=(T=(I=k.state.ctx2.getImageData(0,0,340,340)).data).length;a<r;a+=4)255==T[a]&&255==T[a+1]&&255==T[a+2]?(T[a]=m,T[a+1]=g,T[a+2]=p,T[a+3]=255):195==T[a]&&195==T[a+1]&&195==T[a+2]?(T[a]=b,T[a+1]=E,T[a+2]=d,T[a+3]=255):153==T[a]&&153==T[a+1]&&153==T[a+2]?(T[a]=x,T[a+1]=f,T[a+2]=v,T[a+3]=255):T[a]<255&&T[a+1]<255&&T[a+2]<255&&58<T[a]&&58<T[a+1]&&58<T[a+2]&&(T[a]=b/255*T[a],T[a+1]=E/255*T[a+1],T[a+2]=d/255*T[a+2],T[a+3]=255);k.state.ctx2.putImageData(I,0,0)}k.state.ctx.drawImage(k.state.oMouth.image,k.state.oMouth.x2+k.state.oMouth.iSpr*k.state.oMouth.w,k.state.oMouth.y2,k.state.oMouth.w,k.state.oMouth.h,k.state.oMouth.x,k.state.oMouth.y,k.state.oMouth.w,k.state.oMouth.h),t&&t.preventDefault()},k.exportResult=function(){var t,o;t=(o=document.createElement("canvas")).getContext("2d"),o.width=330,o.height=330;var s=k.state.ctx.getImageData(5,5,330,330),e=s.data;t.putImageData(s,0,0);for(var a=k.state.ctx2.getImageData(5,5,330,330),r=a.data,i=0,l=r.length;i<l;i+=4)0==r[i]&&0==r[i+1]&&0==r[i+2]&&0==r[i+3]&&(r[i]=e[i],r[i+1]=e[i+1],r[i+2]=e[i+2],r[i+3]=255);t.putImageData(a,0,0);var h=o.toDataURL("image/jpeg",1);sendResultToServer(h)},k.init=function(){k.state.canvas=document.getElementById("scene"),k.state.ctx=k.state.canvas.getContext("2d"),k.state.canvas2=document.getElementById("scene2"),k.state.ctx2=k.state.canvas2.getContext("2d");var t=new Image;t.src=website_url+"data/eyes.png",t.onload=function(){};var o=new Image;o.src=website_url+"data/eyebrow.png",o.onload=function(){};var s=new Image;s.src=website_url+"data/mouths.png",s.onload=function(){};var e=new Image;e.src=website_url+"data/face.png",e.onload=function(){};var a=new Image;a.src=website_url+"data/fringes.png",a.onload=function(){i(function(){k.drawScene()},500)};var r=new Image;r.src=website_url+"data/tops.png",r.onload=function(){},k.state.oHead=new Head(0,0,0,0,340,340,e),k.state.oFringe=new Fringe(0,0,0,0,340,340,a),k.state.oEye=new Eye(0,0,0,0,340,340,t),k.state.oEyebrow=new Eyebrow(0,0,0,0,340,340,o),k.state.oMouth=new Mouth(0,0,0,0,340,340,s),k.state.oTop=new Top(0,0,0,0,340,340,r)}}]);

Ответы (0 шт):