如何处理phonegap插件

发布于 2025-01-04 14:31:34 字数 3089 浏览 5 评论 0原文

我的问题是，如果我调用不在index.html 中的插件函数，则会出现以下错误。

02-10 16:48:31.606: D/PhoneGapLog(24149): Uncaught TypeError: Cannot call method 'toDataURL' of undefined

我想使用canvas插件，它在index.html中工作，但在其他页面中不起作用...我必须如何更改此调用：

window.plugins.canvas.toDataURL(canvas, "image/png", success, failure);

其他插件也有同样的问题，-如何在相关页面中实现它们？

关于

代码：

<body>
    <div data-role="page" id="some_id">     

    <style type="text/css">
        #img {
            position:absolute;
            top:20px;
            left:20px;
            width: 400px;
            height: 400px;
            border: 1px solid;
            border-color: #458d91;
            -moz-border-radius:16px;
            -khtml-border-radius:16px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
            padding-top: 10px;
            padding-left:10px;
            padding-right:10px;
            padding-bottom: 10px;
        }
        </style>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="canvas.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0.min.js"></script>

    <script type="text/javascript">

    try {
        var canSave = false;
        var b_canvas;
        function init() {

            document.addEventListener('deviceready', function() {
                canSave = true;
            });

            b_canvas = document.getElementById('cid');
            var b_context = b_canvas.getContext('2d');
            b_context.fillRect(50, 25, 150, 100);
        }
        function saveImg() {

            if (canSave) {

                window.plugins.canvas.toDataURL(b_canvas, "image/png", success, failure);
                function success(arg) {

                    if (arg.size > 0) {
                        var oImgElement = document.createElement("img");
                        oImgElement.src = arg.data;
                        document.getElementById('img').appendChild(oImgElement);
                    } else {            
                        alert("Canvas Write Error: " + arg.debug);
                    }
                }
                function failure(arg) {
                    alert("failure: " + arg);
                }
            }
        }
    } catch(err) { alert(err); }

    </script>

    <br/><br/>
    <a href="#" onclick="init();">init</a>
    <br><br>
    <a href="#" onclick="saveImg();">SAVE</a>
    <div id="img" style="float: left; border: 1px dotted;"></div>
    <br clear="both"/>
    <div style="margin-top: 130px; float: right;">
        <canvas id="cid" width="300" height="225"></canvas>
    </div>


</div>
</body>

原文

My problem is that I get following error if I am calling a function of the plugin not in index.html.

02-10 16:48:31.606: D/PhoneGapLog(24149): Uncaught TypeError: Cannot call method 'toDataURL' of undefined

I want to use the canvas plugin, it's working in the index.html but not in other pages...how I have to change this call:

window.plugins.canvas.toDataURL(canvas, "image/png", success, failure);

also have the same problem with other plugins, - how to implement them in related pages ?

regards

the code:

<body>
    <div data-role="page" id="some_id">     

    <style type="text/css">
        #img {
            position:absolute;
            top:20px;
            left:20px;
            width: 400px;
            height: 400px;
            border: 1px solid;
            border-color: #458d91;
            -moz-border-radius:16px;
            -khtml-border-radius:16px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
            padding-top: 10px;
            padding-left:10px;
            padding-right:10px;
            padding-bottom: 10px;
        }
        </style>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="canvas.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0.min.js"></script>

    <script type="text/javascript">

    try {
        var canSave = false;
        var b_canvas;
        function init() {

            document.addEventListener('deviceready', function() {
                canSave = true;
            });

            b_canvas = document.getElementById('cid');
            var b_context = b_canvas.getContext('2d');
            b_context.fillRect(50, 25, 150, 100);
        }
        function saveImg() {

            if (canSave) {

                window.plugins.canvas.toDataURL(b_canvas, "image/png", success, failure);
                function success(arg) {

                    if (arg.size > 0) {
                        var oImgElement = document.createElement("img");
                        oImgElement.src = arg.data;
                        document.getElementById('img').appendChild(oImgElement);
                    } else {            
                        alert("Canvas Write Error: " + arg.debug);
                    }
                }
                function failure(arg) {
                    alert("failure: " + arg);
                }
            }
        }
    } catch(err) { alert(err); }

    </script>

    <br/><br/>
    <a href="#" onclick="init();">init</a>
    <br><br>
    <a href="#" onclick="saveImg();">SAVE</a>
    <div id="img" style="float: left; border: 1px dotted;"></div>
    <br clear="both"/>
    <div style="margin-top: 130px; float: right;">
        <canvas id="cid" width="300" height="225"></canvas>
    </div>


</div>
</body>

分享到QQ

分享到微博