Android科爾多瓦 - 如何繪製在畫布上拍攝的照片？

我正在使用混合Android應用程序，我需要從相機拍攝照片，處理圖像，然後顯示在另一個窗口上獲得的結果，該窗口應該包含拍攝照片的小預覽和一些結果文本。這裏是不是目前工作相關的代碼，因爲我需要：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（）」語句，我可以看到在屏幕上繪製的黑色矩形，所以它看起來畫布在那裏，但不知何故我不能讓它畫出所需的圖片。

希望我正確地解釋了我自己。

我真的很感激任何幫助。謝謝！

來源

2017-07-29 Matias

好吧，最後我解決了它，首先嚐試使用「img」元素而不是畫布，並且工作正常，但問題是我需要在畫面上繪製一些圖形，所以堅持使用我發佈的代碼之前，我意識到這個問題是在第二腳本使用的drawImage（）方法，它是需要指定位置，所以更換：

context.drawImage(mImage);

與

context.drawImage(mImage,0,0);

解決一切。

來源

2017-07-29 14:31:17 Matias

Android科爾多瓦 - 如何繪製在畫布上拍攝的照片？

回答

相關問題