Question

我正在创建一个应用程序，我需要使用图像颜色来定义我的点击区域，点击后我将更改画布上的图像。

我遇到的问题是，有时图像不会加载，有时图像会一次加载，有时也会在点击屏幕后加载。

function make_image(file)
{
    var example = document.getElementById('example');
    var context = example.getContext('2d');
    context.clearRect(0, 0, example.width, example.height);
    var imageObj = new Image();
    imageObj.onload = function() {
        var height = $('#example').attr('height')*.9;
        var x= imageObj.height/height;
        var width = imageObj.width/x;
        if(imageObj.width > $('#example').attr('width'))
        {
            width = $('#example').attr('width');
            var y = imageObj.width/width;
            height = imageObj.height/y;
            var py = ($('#example').attr('height')-height)/2;
            context.drawImage(imageObj,0,py,width,height);
        }
        else
        {
            var py = ($('#example').attr('height')-height)/2;
            context.drawImage(imageObj,0,py,width,height);
        }
    };
    imageObj.src = file;    
}

这个make_image（）我只是传递图像URL并加载图像。

我如何调用make_image（）

function backbuttonhandle()
{
    if($('#flag').html() == 'gujarat')
    {
        $('#flag').html('india');
        make_image('images/india.png');
        document.removeEventListener("backbutton", backbuttonhandle, false);
    }
    else if($('#flag').html() == 'junagadh')
    {
        $('#flag').html('gujarat');
        make_image('images/gujarat.png');
    }
}

我的HTML -

<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed" id="main_header">
            Geo-spatial Analysis of Election Results in India
        </div>  
        <div data-role="content">
            <img id="hover" src="images/hover.png" style="display:none;position:absolute;z-index:999;">
            <canvas id="example" height="100" width="100"></canvas>
        </div>
        <div data-role="footer" data-position="fixed">
            Datanet Analytics &copy; Datanet India Pvt. Ltd.
            <p  hidden = "hidden" id="flag">india</p>
            <div style="display:none">
                one
            </div>
        </div>  
    </div>
</body>

drawImage（）有时不起作用

0 个答案: