javascript - How to draw on HTML5 canvas without putImageData()? -
i found issue https://code.google.com/p/android/issues/detail?id=17565 , seems not going solved soon, know, how can draw on canvas without using putimagedata()?
var imgcanvas = document.createelement("canvas"); var ctx = imgcanvas.getcontext("2d"); var imageobj.src = 'img/someimage.png'; imageobj.onload = function(){ ctx.draw(imageobj,0,0); var imagedata = ctx.getimagedata(0,0,30,30); var data = imagedata.data; for(var = 0, n = data.length; < n; += 4) { data[i]+=20;//red data[i+1]-=20;//green data[i+2]-=20;//blue data[i+3]=0; //alpha, но я не трогаю этого параметра } ctx.putimagedata(imagedata,0,0); } for instance, in normal browsers, result of changing pixel rgba=[100,100,100,200] above script should rgba=[120,80,80,200], on android's 4.2 default browser result not expected, weird rgba=[153,102,102,200]. anyway, point there issue , know, how can change 1 image's rgba parameters without using putimagedata() method?. if there not way canvas, know, how can solve way? need change image color dinamically, , need work on android (i using phonegap , result same in default android browser). thank you!
if want change full image color factor (for example, add 10 r, 30 g , 4 b), use globalcomposite operations: https://developer.mozilla.org/en-us/docs/web/guide/html/canvas_tutorial/compositing
check 'lighter' , 'darker' ops.
if want set different color / factor each pixel, think putimagedata way go...
hope helps.
Comments
Post a Comment