4

クリックするたびに、Androidフォンで写真を表示して90度回転させようとしています。小さい画像では問題なく動作しますが、しばらく (たとえば 10 回程度) クリックすると 8 メガピクセルの写真の場合、ctx.drawImage は何も描画しなくなります。Android WebView でメモリ リークが発生しているようです。携帯電話の Chrome で大きな画像が正常に表示されるためです。

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

htmlコードは次のとおりです。

<!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>
4

0 に答える 0