javascript - canvas.toDataURL()的返回值怎么传递，将canvas.toDataURL()封装在函数中返回就出错

问题描述

问 题

举个例子是这样的，下面的代码是可以的：

<div hidden>
  <canvas id="test"></canvas>
</div>
<div id="img"></div>

<script type="text/javascript">

    window.onload = function(){
        var canvas = document.getElementById("test");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        var img = new Image();
        img.src = "./qrcode.jpeg";
        img.onload = function(){
            context.drawImage(img,200,50);
            var image = canvas.toDataURL("image/jpeg",0.5);
            $("#img").append('<img src="'+image+'" />');
        }
    };

</script>

但是把canvas绘制部分一封装就出错：

<div hidden>
  <canvas id="test"></canvas>
</div>
<div id="img"></div>

<script type="text/javascript">

    window.onload = function(){
      $("#img").append('<img src="'+canvasDraw()+'" />');
    };

    function canvasDraw(){
        var canvas = document.getElementById("test");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        var img = new Image();
        img.src = "./qrcode.jpeg";
        img.onload = function(){
            context.drawImage(img,200,50);
            var image = canvas.toDataURL("image/jpeg",0.5);
            return image;
        }
    }

</script>

控制台就出现 GET http://localhost/undefine 404错误，然后显示不出来

所以这样的原因是什么？

解决方案

你这样封装不对呀；

 window.onload = function(){
      $("#img").append('<img src="'+canvasDraw()+'" />');
    };

你这么写，canvasDraw这个方法应该是return图片的src地址的。
但是看你的方法实现，你放到onload里面return了，也就是说canvasDraw没有return吧,所以调用这个方法的时候 ，返回了undefined，
所以控制台才说GET http://localhost/undefine 404.

这篇关于javascript - canvas.toDataURL()的返回值怎么传递，将canvas.toDataURL()封装在函数中返回就出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！