javascript - image slicing, only saves (via Filesaver.js) last slice in sequence -

-

hi i'm writing function break large image individual smaller tiles, , save tiles locally via filesaver.js. however, reason, for-loop keeps writing last tile in. example, if have image , break 4 blocks, , decide write out 2 blocks in first row, both saved image tiles display 2nd image tile.

i write out block number image name (testimage_0.jpg & testimage_1.jpg), both tile image names testimage_1.jpg. have no clue why!, tried context.clearrect, no success. can please me out here silly problem? here function: 

var canvas = document.createelement('canvas');  var tilewidthpx = parseint(document.getelementbyid("horizppt").value); var tileheightpx = parseint(document.getelementbyid("vertppt").value); canvas.setattribute('width', tilewidthpx); canvas.setattribute('height', tileheightpx);  for(var = 0; < 2; i++) {        var context = canvas.getcontext('2d');     context.clearrect(0,0,canvas.width,canvas.height);     context.drawimage(coverageimg,i*tilewidthpx,0,tilewidthpx,tileheightpx,0,0,tilewidthpx,tileheightpx);       canvas.toblob(function(blob){saveas(blob,'testimage_'+i+'.jpg');}, "image/jpg");      alert('done: '+i); }

even though alert displays correct 'i' value of loop... please, anybody, javascript async-problem i'm missing (also converted algorithm promise, didn't solve anything)

so javascript's async functionality made weird. got tile generating algorithm correct creating repetitive function , adding delays (important) in function, here. had pass row , column values correct template position generated. here's resulting code: 

    var canvas = document.createelement('canvas');      var tilewidthpx = parseint(document.getelementbyid("horizppt").value);     var tileheightpx = parseint(document.getelementbyid("vertppt").value);     canvas.setattribute('width', tilewidthpx);     canvas.setattribute('height', tileheightpx);      var context = canvas.getcontext('2d');            var col = 0; //variable columns     var row = 0;     var colcount = 2;     var rowcount = 2;     loop(col,row,colcount,rowcount);    //call delayed loop first time     function loop (col,row,colcount,rowcount)   //repetitive function     {             settimeout(function ()          {                 context.beginpath();             context.drawimage(coverageimg,col*tilewidthpx,row*tileheightpx,tilewidthpx,tileheightpx,0,0,tilewidthpx,tileheightpx);              canvas.toblob(function(blob){saveas(blob,'testimage_c'+col+'_r'+row+'.png');}, "image/png");             context.closepath();             context.clearrect(0,0,canvas.width,canvas.height);                col++;                if(col == colcount)             {                 col = 0;                 row++;             }             if(row < rowcount)                                   loop(col,row,colcount,rowcount);  //repeat function while below col threshold              }.bind(this), 2000) //function delayed 2 seconds*/     }

hope helps whomever gets stuck same annoying problem...


Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more