canvas.toDataURL在使用cordovaImagepicker拾取pic时返回黑色图像

Question

我正在使用html canvas调整图像大小。当我从项目文件夹加载图像时，我将图像路径（img / tom.jpg）传递给canvas.draw方法。之后我得到base64url然后我追加那个url到img src，那是完美的工作。但是当我用cordovaImagepicker在cordova中选择图像然后我将响应url传递给canvas draw方法时，我得到了base64 url​​但是当我追加那个url时img src，它完全是黑色的正方形。请帮助我..

这是我的html（这里是dummyImage {{这是我从设备库中选取的图片网址}}）： -

  <img id="sourceImage" src="" style="display:none;">
          <img id="dummyImage" width="150" height="150" src="{{image}}" alt="The Scream" style="display:none;">
          <canvas id="myCanvas" width="230" height="230"style="display:none;">
    <script>
     $(document).ready(function(){

        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("dummyImage");

        ctx.drawImage(img, 0,0, 230, 230);

        $('#sourceImage').attr('src', canvas.toDataURL("image/jpeg"));
        $.getScript('js/test.js');

    });
      </script>

这是我的控制台，在dummyImage（img tag id）中，我正在选择图像网址，在sourceImage中，我正在获取画布大小调整网址，看到我正在获取黑色图像......

Answer 1

您的问题可能在于使用src="file:///data/data/..."。来源应该是/path/to/picture.jpg。

画布本身不是黑色方块，只是空/透明画布的图像渲染。要确认这一点，只需从canvas元素中删除display：none。

小提琴：https://jsfiddle.net/u857pehs/1/