tongshuo_11
Monkey_shuo
采纳率0%
2017-03-10 09:49

canvas的drawImage出现的问题

1

如下是我的全部代码,在谷歌浏览器中运行,但是canvas就是画不出图片。求大神指点,哪里写的有问题?

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="root">

    </div>
    <img id="preview" src="http://img02.tooopen.com/images/20140504/sy_60294738471.jpg" />
    <script>
        var img = document.getElementById('preview');

        document.getElementById('root').appendChild(convertImageToCanvas(img));
        function convertImageToCanvas(image) {
            var canvas = document.createElement("canvas");
            canvas.setAttribute('style','border:1px solid #000');
            canvas.getContext("2d").drawImage(image, 0, 0);
            canvas.width = image.width;
            canvas.height = image.height;

            return canvas;
        }
    </script>
</body>

</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • qq_29594393 当作看不见 4年前
     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
        <div id="root">
    
        </div>
        <img id="preview" src="http://img02.tooopen.com/images/20140504/sy_60294738471.jpg" />
        <script>
            var img = document.getElementById('preview');
    
            document.getElementById('root').appendChild(convertImageToCanvas(img));
            function convertImageToCanvas(image) {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.setAttribute('style','border:1px solid #000');
                canvas.getContext("2d").drawImage(image, 0, 0);
    
    
                return canvas;
            }
        </script>
    </body>
    
    </html>
    

    交换一下顺序就可以了

    点赞 1 评论 复制链接分享
  • tongshuo_11 Monkey_shuo 4年前

    图片说明
    运行的结果是这样的。

    点赞 评论 复制链接分享

相关推荐