javascript - How can I speed up this slow canvas DrawImage operation? WebGL? Webworkers? -

-

i combining 2 high resolution images html5 canvas element.

the first image jpeg , contains color data, , second image alpha mask png file.

i combine 2 produce single rgba canvas.

the app dealing 2048x2048 resolution images, need maintain alpha channel. therefore using method ooposed using png's, have reduced average filesize around 2-3mb 50-130kb plus 10kb png alpha mask.

the method use follows:

context.drawimage(alpha_mask_png, 0, 0, w, h); context.globalcompositeoperation = 'source-in'; context.drawimage(main_image_jpeg, 0, 0, w, h);

unfortunately operation takes around 100-120ms. , carried out once each pair of images loaded. while wouldn't issue, in case animation being rendered main visible canvas (of these high res images source art for) suffers noticable 100ms judder (mostly perceptible in firefox) whenever new source art streamed in, loaded, , combined.

what looking way reduce this.

here have tried far:

  • implemented webp google chrome, removing need combine jpeg , png alpha mask altogether. perfect in chrome need solution firefox (ie 10/11 seems perform operation far quicker)
  • i have tried loading images in webworker , decoding them both, followed combining them. in pure javascript. works far slow of use.
  • i have tried using webp polyfills. weppy fast , when ran in webworker not effect main loop. not support alpha transparency of no use real shame method close. libwebpjs works okay within webworker manual decoding of jpeg/png, far slow.

edit: further clarify. have tried transferring data webworkers using transferrable objects , have tried turning result blob , creating objecturl can loaded main thread. although there no lag in main thread more, images take far long decode.

this leaves me webgl. have literally no understanding of how webgl works other realise need load both jpeg , png seperate textures combine them shader. wouldn't know begin.

i have spent time playing code following link:

blend 2 canvases onto 1 webgl

but no avail. , honest concerned loading images textures might take longer original method anyway.

so summarise, looking way of speeding operation on high resolution images. (1920x1080 - 2048x2048) use of webgl or indeed other method.

any or suggestions appreciated.


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more