canvas.toDataURL 在使用cordovaImagepicker 选择图片时返回黑色图像

Question

我正在使用 html canvas 调整图像大小。当我从项目文件夹加载图像时，我将图像路径（img/tom.jpg）传递给 canvas.draw 方法。之后我得到 base64url，然后我正在追加那个指向 img src 的 url，工作得很好。但是当我用 cordovaImagepicker 在科尔多瓦中挑选图像然后我将响应 url 传递给画布绘制方法时，我得到 base64 url​​ 但是当我将该 url 附加到 img src 时，它完全像正方形一样黑。请帮助我..

这是我的 html（这里是 dummyImage {{这是我从设备库中获取的图像 url}}）：-

  <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) 中，我得到了选择的图像 url，在 sourceImage 中，我得到了画布调整大小的 url，看到我得到黑色图像...

Answer 1

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

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

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