Canvas drawImage in WebView not working with reusable image

Question

Canvas drawImage in WebView not working with reusable image

I try to show the photo and rotate it 90 degrees on the Android phone after each click. It works great with smaller images, but for photos with 8 megapixels after clicking for a while (for example, about 10 times) ctx.drawImage stops drawing anything. This is similar to a memory leak in Android WebView, because Chrome on my phone shows large images in order.

WebView webview = (WebView) rootView.findViewById(R.id.webView1); WebSettings settings = webview.getSettings(); settings.setJavaScriptEnabled(true); webview.loadUrl("file:///android_asset/ROTATING_image.html");

The html code is this:

 <!DOCTYPE html> <html> <body> <canvas id="canvas"/> </body> <script type="text/javascript"> (function(undefined) { var $ = function(id) { return document.getElementById(id); }; var draw = function(degree) { var ctx = $('canvas').getContext('2d'); var cw = img.width, ch = img.height, cx = 0, cy = 0; switch (degree) { case 90: cw = img.height; ch = img.width; cy = img.height * (-1); break; case 180: cx = img.width * (-1); cy = img.height * (-1); break; case 270: cw = img.height; ch = img.width; cx = img.width * (-1); break; } $('canvas').height = ch; $('canvas').width = cw; degree && ctx.rotate(degree * Math.PI / 180); ctx.drawImage(img,cx,cy); }; var img = new Image; //Works fine with such small image, but not with the 8 megapixel one img.src = 'https://lh3.googleusercontent.com/-wNKEHHjRDlc/T665lI3U5RI/AAAAAAAAX_4/95A2vEhdx_c/s720/IMG_1592.JPG'; img.onload = function() { draw() }; var curDegree = 0; $('canvas').onclick = function(e) { curDegree=curDegree+90; if(curDegree==360) {curDegree=0;} draw(curDegree); }; })(); </script> </html>