0

ここでは、サブサンプリング ドラマ全体を回避するために、ここで優れたライブラリを使用して、iPhone カメラから入ってくるいくつかの大きな画像を処理しています。

私の描画コード:

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
}

画像はうまく描画されています...しかし、その後、その画像に対して画像処理を行う方法を見つけることができないようです。その画像をキャンバスに描いた後、新しいコンテキストを取得するにはどうすればよいですか?

おそらく、そのライブラリ内からさらに画像処理を実行して、コンテキストにアクセスできるようにするか、ライブラリからコンテキスト描画を削除する必要があります。

助けてくれてありがとう！

4

1 に答える 1

0

同様の問題があり、実際にサブサンプリングを検出しMegaPixImage、サブサンプリングが見つかった場合にのみ使用する便利な機能を見つけました。

私の場合、ローカル ファイルの読み取り (あなたの場合は iPhone カメラ) では、値が変更されたとき (つまり、この入力を設定するためにファイルが選択されたとき) にhandleFileSelect関数を呼び出しました。<input type="file">この関数内で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;
}

これはあなたが交渉した以上のものかもしれませんが、私が言ったように、私は同様の問題に遭遇し、この解決策はキャンバスがサポートされているすべてのブラウザー/デバイスで機能することが証明されました.

それが役に立てば幸い！

于 2013-05-10T20:01:03.507 に答える