Android Cordova - 如何绘制在画布上拍摄的照片？答案

【问题标题】：Android Cordova - How to draw photo taken on canvas?Android Cordova - 如何绘制在画布上拍摄的照片？
【发布时间】：2017-07-29 00:33:42
【问题描述】：

我正在使用一个混合 Android 应用程序，我需要从相机拍照，处理图像，然后在另一个窗口上显示获得的结果，该窗口应该包含所拍摄照片的小预览和一些带有结果的文本. 以下是我需要的当前无法正常工作的相关代码：

来自第一个窗口的脚本：

    .
    .
    .
    CameraPreview.takePicture(function(imgData){
      var mImage = new Image();
      mImage.onload = function(){    
        var canvas = document.createElement('canvas');
        canvas.width = mImage.width;
        canvas.height = mImage.height;
        var context = canvas.getContext('2d');
        context.drawImage(mImage, 0, 0);
        var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        .
        .(Process imgData[])
        .
        localStorage.setItem("resultImage", mImage.src);        
        window.open('result.html','_blank','location=no');
      };

      mImage.src = 'data:image/jpeg;base64,'+imgData;

   });

然后，弹出“result.html”，其html内容如下：

    ...
    <body>
      ...
      <canvas id="resultCanvas" style="position: absolute; top: 0%; left: 0%;"></canvas>
      ...
    </body>
    ...

还有下面的javascript代码：

    ...
    var mImage = new Image();      
    mImage.onload = function(){    
      var canvas = document.getElementById('resultCanvas');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight*0.3; // 1/3 of phone screen size
      var context = canvas.getContext('2d'); 
      context.drawImage(mImage);
      navigator.notification.alert('Height = '+mImage.height+'\n'+'Width ='+mImage.width, function(){},'Image','Done');
    };
    mImage.src = localStorage.getItem("resultImage");
    ...

警报窗口显示 640x480 的图像，但画布是透明的，它应该包含拍摄的照片。如果我用“context.fillrect()”替换“context.drawImage()”语句，我可以看到屏幕上绘制的黑色矩形，所以看起来画布在那里，但不知何故我无法让它绘制所需的图像.

希望我的解释正确。

我非常感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript android html cordova

【解决方案1】：

好吧，终于我解决了，首先我尝试使用“img”元素而不是画布，效果很好，但问题是我需要在图片上绘制一些绘图，所以坚持使用我之前发布的代码，我意识到问题出在第二个脚本中使用drawImage()方法，需要指定位置，所以替换：

   context.drawImage(mImage);

与

   context.drawImage(mImage,0,0);

解决了所有问题。

【讨论】：