Javascript WebView中的Canvas drawImage无法使用重复使用的图像_Javascript_Html_Canvas_Android Webview

Javascript WebView中的Canvas drawImage无法使用重复使用的图像

javascript html canvas

Javascript WebView中的Canvas drawImage无法使用重复使用的图像,javascript,html,canvas,android-webview,Javascript,Html,Canvas,Android Webview,我试图显示照片，并在每次点击后在Android手机上旋转90度。它适用于较小的图像，但对于点击一段时间（例如大约10次）后的800万像素的照片，ctx.drawImage停止绘制任何内容。这看起来像是Android WebView中的内存泄漏，因为我手机上的Chrome可以很好地显示大图像 WebView webview = (WebView) rootView.findViewById(R.id.webView1); WebSettings settings = webview.getSett

我试图显示照片，并在每次点击后在Android手机上旋转90度。它适用于较小的图像，但对于点击一段时间（例如大约10次）后的800万像素的照片，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>


（功能（未定义）{
var$=函数（id）{
返回文档.getElementById（id）；
};
var draw=函数（度）{
var ctx=$（'canvas'）.getContext（'2d'）；
var cw=惯性宽度，ch=惯性高度，cx=0，cy=0；
开关（度）{
案例90：
cw=img.高度；
ch=img.宽度；
cy=惯性高度*（-1）；
打破
案例180：
cx=img.宽度*（-1）；
cy=惯性高度*（-1）；
打破
案例270：
cw=img.高度；
ch=img.宽度；
cx=img.宽度*（-1）；
打破
}
$（'canvas'）。高度=ch；
$（'canvas'）。宽度=cw；
度和ctx旋转（度*数学PI/180）；
ctx.drawImage（img、cx、cy）；
};
var img=新图像；
//适用于如此小的图像，但不适用于800万像素的图像
img.src=https://lh3.googleusercontent.com/-wNKEHHjRDlc/T665lI3U5RI/AAAAAAAAX_4/95A2vEhdx_c/s720/IMG_1592.JPG';
img.onload=函数（）{
画（）
};
var-curDegree=0；
$（'canvas'）。onclick=function（e）{
curDegree=curDegree+90；
如果（curDegree==360）
{curDegree=0；}
牵引（度）；
};
})();