使用JavaScript庫處理圖像大小時獲取上下文的問題

Question

我在此處使用良好的library來處理通過iphone相機進入的一些大圖像，以避免整個二次採樣劇集here。

我的抽獎代碼：

function imageLoaded(img, frontCamera) { 

    element = document.getElementById("canvas1"); 
    var mpImg= new MegaPixImage(img); 

    // read the width and height of the canvas- scaled down 
    width = element.width; //188 94x2 
    height = element.height; //125 

    //used for side by side comparison of images 
    w2 = width/2; 

    // stamp the image on the left of the canvas 
    if (frontCamera) { 
     mpImg.render(element, {maxWidth:94, maxHeight:125});} else{ 
     mpImg.render(element, {maxWidth:94, maxHeight:125});} 

    //at this point, i want to grab the imageData drawn to the canvas using 
    //MegaPixImage and continue to do some more image processing, which normally 
    //would happen by declaring ctx=element.getContext("2d"); 
//more stuff here 
} 

的圖像精細繪圖，......但我似乎無法找到的，然後這樣做，圖像圖像處理隨後的一種方式。在畫布上繪製該圖像後，如何獲得新的上下文？

也許我要麼必須從該庫中運行更多的圖像處理，這樣我纔有上下文訪問權限，或者將上下文從庫中抽出。

感謝您的幫助！

Answer 1

我有一個類似的問題，實際上發現了一個有用的函數來檢測子採樣，並且只在使用子採樣時使用MegaPixImage。

在我的情況下，本地文件讀取（iPhone的攝像頭，你的情況），我當<input type="file">值改變稱爲handleFileSelect功能（當文件被選中來填充這個輸入即）。在這個函數內部，我調用了一個將圖像數據繪製到畫布的常規populateImage JS函數。

這裏的handleFileSelect功能和input結合：

$("#my_file_input").bind('change', function (event) { 
    handleFileSelect(event); 
}); 
function handleFileSelect(event) { 
    var reader, 
     tmp, 
     file = event.target.files[0]; 
    try { 
     reader = new FileReader(); 
     reader.onload = function (e) { 
      tmp = e.target.result.toString(); 
      // In my case, some image data (from Androids, mostly) didn't contain necessary image data, so I added it in 
      if (tmp.search("image/jpeg") === -1 && tmp.search("data:base64") !== -1) { 
       tmp = tmp.replace("data:", "data:image/jpeg;"); 
      } 
      populateImage(tmp); 
     }; 
     reader.onerror = function (err) { 
      // Handle error as you need 
     }; 
     reader.readAsDataURL(file); 
    } catch (error) { 
     // Handle error as you need 
    } 
} 

然後，我populateImage功能（稱爲在上面的reader.onload功能）：

function populateImage(imageURL) { 
    var tmpImage = new Image(); 
    $(tmpImage).load(function() { 

     var mpImg, mpImgData; 

     // If subsampling found, render using MegaPixImage fix, grab image data, and re-populate so we can use non-subsampled image. 
     // Note: imageCanvas is my canvas element. 
     if (detectSubsampling(this)) { 
      mpImg = new MegaPixImage(this); 
      mpImg.render(imageCanvas, {maxWidth: 94, maxHeight: 125}); 
      mpImgData = imageCanvas.toDataURL("image/jpg"); 
      populateImage(mpImgData); 
      return; 
     } 

     // Insert regular code to draw image to the canvas 
     // Note: ctx is my canvas element's context 
     ctx.drawImage(tmpImage, 0, 0, 94, 125); // Or whatever x/y/width/height values you need 

    }); 
    $(tmpImage).error(function (event) { 
     // Handle error as you need 
    }); 
    tmpImage.src = imageURL; 
} 

最後但並非最不重要的，detectSubsampling功能。請注意，此方法是從另一個來源找到的，不是我自己的。

function detectSubsampling(img) { 
    var iw = img.naturalWidth, 
     ih = img.naturalHeight, 
     ssCanvas, 
     ssCTX; 
    if (iw * ih > 1024 * 1024) { // Subsampling may happen over megapixel image 
     ssCanvas = document.createElement('canvas'); 
     ssCanvas.width = ssCanvas.height = 1; 
     ssCTX = ssCanvas.getContext('2d'); 
     ssCTX.drawImage(img, -iw + 1, 0); 
     // Subsampled image becomes half smaller in rendering size. 
     // Check alpha channel value to confirm image is covering edge pixel or not. 
     // If alpha value is 0 image is not covering, hence subsampled. 
     return ssCTX.getImageData(0, 0, 1, 1).data[3] === 0; 
    } 
    return false; 
} 

這可能比你討價還價的更多，但就像我說的，我遇到類似的問題，這種解決方案被證明在所有瀏覽器/那名支持畫布設備一起使用。

希望它有幫助！