Question

我在这段代码中遇到了麻烦（我在本地PC上工作）。

求助于你。

我的代码如下：

<html>
    <head>
        <title>My Test</title>
        <script src="../jquery/js/jquery-1.9.0.min.js"></script>  
    </head>
    <body>
        <script>
            var _canvas = document.createElement('canvas');
            _canvas.width="100";
            _canvas.height="100"; 
            var _context = _canvas.getContext("2d");
            var _img = new Image();
            _img.src = "image/myImgTest.png";
            var _url;

            _img.onload = function() {
            DrawScreen(); // just some process: drawing image
            _url = _canvas.toDataURL(); 
            alert("test"); **// this alert is printed on FF not on Chrome ???**
            // window.location = url; **// With this command on FF, I show my Image**
            document.write("<img src='"+url+"' >"); **// on FF, I show my image but when I would like to see the source code on my current page, there is nothing just blank ?? And on Chrome, I never show my image.** 

            **// In fact, I am expected to generate something like this: <img src="data:image/png;base64,iVBORw0KGgo.....">  at this place **

            };
            function DrawScreen() {
                // my process
            }

        </script>

    </body>
</html>

* //事实上，我希望生成这样的东西：在这个地方*

Answer 1

当您“在本地PC上工作”时...您是否在本地PC上有网络服务器，或者您只是直接从硬盘驱动器打开HTML文件？

您可能希望将.src的分配移至.onload事件处理程序之后，否则.onload可能永远不会被触发。

var _img = new Image();
var _url;

_img.onload = function() {
   ...
};
_img.src = "image/myImgTest.png";

在document.write上画布有问题

1 个答案: