7

context-blenderを使用して、html background-image の最初の 192 ピクセルに乗算効果を適用し、固定色でページのヘッダーに透明効果を実現しています。

HTMLには2つのキャンバスがあります。1 つは乗算効果を適用するイメージの部分用で、もう 1 つは色用です。

javascript では、color-canvas の色と両方のキャンバスの幅を window.innerWidth に設定した後、次のように背景画像を取得しています。

imageObj.src = $('html').css('background-image').replace(/^url|[\(\)]/g, '');

ここで問題が発生します。乗算効果を適用できるように、切り抜いた画像を画像キャンバスに描画したいと考えています。私は次のことをしようとしています:

imageObj.onload = function(){
    // getting the background-image height
    var imageHeight = window.innerWidth * imageObj.height / imageObj.width;

    // get the corresponding pixels of the source image that correspond to the first 192 pixels of the background-image
    var croppedHeight = 192 * imageObj.height / imageHeight;

    // draw the image to the canvas
    imageCanvas.drawImage(imageObj, 0, 0, imageObj.width, croppedHeight, 0, 0, window.innerWidth, 192);

    // apply the multiply effect
    colorCanvas.blendOnto( imageCanvas, 'multiply');
}

しかし、トリミングされた高さを取得するのに何か間違っています。

例: 1536x1152 の画像と 1293x679 のブラウザー コンテナーの場合、ソースのトリミングされた高さの値は 230 ですが、適切なトリミングを取得するには 296 前後の値を使用する必要があります。

編集：

css で background-size: cover を使用して background-image を作成しています

編集2:

問題を説明するためにフィドルを作成しました。この行のコメントを外すと//cHeight *= magicConstant;、トリミングされた画像の見栄えは良くなりますが、意味がなくなります。フィドラーの乗算効果を削除しましたが、問題を再現する必要はありません。URL から 2 番目のキャンバスを削除すると、動作が変わることにも気付きました。

ところで、この動作は google chrome で発生しましたが、safari と firefox でも同じことが起こると思います。

4

2 に答える 2

5

わかりました、私はそれを修正しました。男は大変だった！主な理由は、imageCanvas のキャンバスの高さを設定するのを忘れたためです。また、画像に白い枠があることも役に立ちませんでした。パディングがどこから来ているのかを把握するために、私は非常に多くの時間を費やしました.

まず、fiddleの場合、 functiondoBlending()に設定しますimageCanvas.canvas.height = height;

crop()次に、 2つの可能性をカバーするために必要な計算。画像は、高さが調整されて左側が切り捨てられていますか、それとも幅が調整されて下部が切り捨てられていますか? 私はあなたのために両方を書くつもりはありませんが、これは高さのためにスケーリングされた場合のものです:

function crop(imageObj, imageCanvas, colorCanvas) {
    // Assumes bg image is scaled for hight
    var scale = imageObj.height / window.innerHeight; 
    var targetHeight = imageCanvas.canvas.height;
    var targetWidth = window.innerWidth;

    imageCanvas.drawImage(imageObj, 
                          0, 0, targetWidth * scale, targetHeight * scale,
                          0, 0, targetWidth, targetHeight);
}

あなたの例のスケーリング係数をどこで思いついたのか、私には本当にわかりません。画像は、x 次元と y 次元の両方に何らかの倍率を掛けることによってスケーリングされます。それがアスペクト比を維持する方法です。倍率は、画像の高さをウィンドウの高さに合わせる場合と、画像の幅をウィンドウの幅に合わせる場合のどちらか大きい方になります。

于 2012-04-23T03:43:45.373 に答える
1

ここで窓の内側の寸法を使用することは有効ではないかもしれません。カバーは背景画像のアスペクト比を維持するため、両方の寸法が完全に表示されない可能性があります。したがって、アスペクト比を変換してクリップする場所を決定しようとしている場合は、画像がウィンドウの境界から流れ出る可能性があるという事実を考慮する必要があります。

于 2012-04-18T03:24:52.403 に答える