Phonegap - 畫布上的圖像比HTML頁面上的圖像更大

我使用Phonegap允許用戶從其庫中選擇一張照片，然後對其進行編輯。Phonegap - 畫布上的圖像比HTML頁面上的圖像更大

當我檢索使用PhoneGap的照片，我將圖像存儲在已經是我的網頁上的HTML img元素：

sourceImage = document.getElementById('smallImage'); 
    sourceImage.style.display = 'block'; 
    sourceImage.src = "data:image/jpeg;base64," + imageData;

當然，當照片中的負載，也可能是比較大的手機屏幕，所以我縮小了我的img元素。我修改了實際的img元素寬度和高度，而不是css屬性，並且圖像在屏幕上正確顯示（大約288 x 200，而不是原始的1024 x 768）。所以，我的img元素現在顯示的照片（預覽），當用戶進入到下一個屏幕，圖像繪製在畫布上，因此它可以被修改：

sourceImage.onload = function(){ 
    myCanvas.drawImage(sourceImage, 0, 0); 
}

圖像繪製正確，然而，它會繪製從庫中檢索到的原始1024 x 768圖像，而不是在頁面上顯示的實際img元素中修改後的較小圖像。我假設這是由於實際的image.src引用的是一個1024 x 768的圖像，儘管我縮小了它。

我還沒有找到任何支持重新調整圖像，然後將它們存儲在手機中。有沒有人知道我可以修改這個圖像的大小，以便在繪製到畫布之前縮小它的方式？（請記住用戶正在從他們的庫中即時載入圖片，我寧願有一個客戶端解決方案，但我一直沒有找到）。

來源

2011-06-06 Jared Sheets

當你畫在畫布上的圖像，你可以指定畫布上的目的地COORDS的圖像你喜歡的部分繪製這樣的：

context.drawImage(image, source_x1, source_y1, source_x2, source_y2, dest_x1, dest_y1, dest_x2, dest_y2);

所以，你可以在任何大小繪製圖像，你像...

來源

2011-06-06 19:09:49

得到它的工作。 – 2011-06-07 13:57:08

丹尼爾，道歉，第一次在StackOverflow ...試圖編輯我的迴應更清晰和意外張貼。對於遇到類似問題的人，我得到了我的圖像和首選大小（originalImageSize/preferredImageSize）之間的差異，並簡單地使用它來修改source_x1，source_x2，source_y1和source_y2。也許不是最乾淨的解決方案，但它運作良好。 – 2011-06-07 14:04:53

很高興爲你工作:) – 2011-06-07 14:28:43

Phonegap - 畫布上的圖像比HTML頁面上的圖像更大

回答

相關問題