Error in JavaScript on Canvas(HTML5)- can't figure it out -
i have javascript code in site. code using 2 identical photos-same size, same resolution - different colors. first photo black , white photo - canvas presents. sec photo same original colors. have button triggers js code - removes pixel black , white -and paints color pixel on canvas. @ first used math.random pixel locations. , decided utilize order. no matter starts or begging.. long go in order (x,y)..(x+1,y).. until maximum x.. , (x,y+1).. until maximum x.. , on until black , white photo "transformed" colorful photo.. reason cant create happen.. tried lot of techniques.. here demo global understanding: demo working sorry - deactivated free host :\ hope still understand..
here original code- changed lastly function : **removedrawrandompixel** ..it's playing function there , should fixed..
///////////////////////global variables/////////////////// var gray_url="bwcat.jpg"; //black , white image uri var regular_url="cat.jpg"; //regular image uri var n=100; //number of pixels changed per click ///////////////////////////////////// document.addeventlistener("domcontentloaded", function(){ var c=new editablecanvas(document.getelementbyid('cnvs')); grayscaleimage=new image(); grayscaleimage.src=gray_url; grayscaleimage.onload=function() { c.drawimage(this); } regularimage=new image(); regularimage.src=regular_url; regularimage.onload=function() { var p=getpixelarray(this); btn.onclick=function(){ for(var i=1;i<=n&&p.length>0;i++){ removedrawrandompixel(p,c); } } } },false); //create pixel object function imagepixel(x,y,r,g,b,a) { this.x=x; this.y=y; this.r=r; this.g=g; this.b=b; this.a=a; } //object allows custom methods function editablecanvas(canvas) { this.canvas=canvas; this.context=canvas.getcontext('2d'); this.width=canvas.width; this.height=canvas.height; this.pixelimage=this.context.createimagedata(1,1); //draw entire image , adjust canvas this.drawimage=function(image) { this.width=image.width; this.height=image.height; this.canvas.height=image.height; this.canvas.width=image.width; this.context.drawimage(image,0,0); } //draw single pixel, imagepixel pixel this.drawpixel=function(pixel) { this.pixelimage.data[0]=pixel.r; this.pixelimage.data[1]=pixel.g; this.pixelimage.data[2]=pixel.b; this.pixelimage.data[3]=pixel.a; this.context.putimagedata(this.pixelimage,pixel.x,pixel.y);//,pixel.x,pixel.y); } } //the function returns ordered array of pixel pixels of image @ `src`. function getpixelarray(img) { var pixelarray=[]; var cnvs=document.createelement('canvas'); cnvs.width=img.width; cnvs.height=img.width; var context=cnvs.getcontext('2d'); context.drawimage(img,0,0); var originaldata = context.getimagedata(0,0,img.width,img.height).data; for(var i=0,pixelid=0,px;i<originaldata.length;i+=4) { px=new imagepixel(pixelid%img.width,math.floor(pixelid/img.width),originaldata[i],originaldata[i+1],originaldata[i+2],originaldata[i+3]); pixelarray.push(px); pixelid++; } homecoming pixelarray; } //the function remove random pixel pixelarray , draws on editablecnvs function removedrawrandompixel(pixelarray,editablecnvs) { var place=math.floor(math.random()*pixelarray.length); var px=pixelarray.splice(place,1)[0]; editablecnvs.drawpixel(px); } html :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas rules</title> <script src="pixel.js"></script> </head> <body> <canvas id="cnvs"> oh goddmamit no back upwards </canvas> <button id="btn">click convert</button> </body> </html> i tried playing lastly function.. because know reply in function,how take pixels..
this untested alter removedrawrandompixel function to. grabbing random point in array , passing it, starting on bluish component of 1 pixel , ending on g component of pixel.
//the function remove random pixel pixelarray , draws on editablecnvs function removedrawrandompixel(pixelarray,editablecnvs) { // width , height need width , height of canvas. var width = canvas.width, height = canvas.height, x = math.floor(math.random()*width), y = math.floo(math.random()*height); var px = (y * width + x) * 4; editablecnvs.drawpixel(px); } javascript html5 image canvas pixel
No comments:
Post a Comment