1

HTML 5 Canvas & Java スクリプトを使用して画像編集ツールを作成しています。キャンバスに合わせて画像をスケーリングし、いくつかのフィルターを適用して、画像をディスクに保存することで、大きな画像をキャンバスにロードしています。

問題は、キャンバスを画像に保存すると、キャンバスサイズの画像が保存されることです。私が望むのは、画像がフィルターを適用して実際の寸法に保存されることです。Flickr で使用されているのと同じアプローチ。

例えば

画像が 1000px X 1000px で、300px X 300px のキャンバスに表示されている場合、画像を 300px X 300px としてキャンバスにロードしています。保存中に、1000px X 1000pxの寸法で画像を保存したい. どうやってするか？

私はphp、HTML5、Javascriptを使用して開発しています。

画像をサーバーに送信する前に、クライアント側ですべてを行いたい

ヘルプはありますか？

適切な解決策を探しています

4

2 に答える 2

3

それを見つけた。

css & tag 属性を使用してキャンバス サイズを変更するだけです。

CSS の幅と高さはキャンバスの表示領域を調整します タグの幅と高さは実際の画像の幅と高さです

例えば：

#canvas { width:500px; height:350px}
<canvas id="canvas" width="1024" height="760"></canvas>

上記は、500px x 350px のブロックでキャンバスを表示します。ただし、キャンバスを画像に保存すると、画像サイズ 1024x760 で保存されます

于 2012-10-17T10:22:24.953 に答える
1

このリンクを使用してください。完全なチュートリアルがあります。

http://www.sitepoint.com/image-resizing-php/

この画像の寸法はそれに応じて変化します。

アップデート

クライアント側の場合

http://ericjuden.com/2009/07/jquery-image-resize/

$(document).ready(function() {
$('.story-small img').each(function() {
    var maxWidth = 100; // Max width for the image
    var maxHeight = 100;    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    var width = $(this).width();    // Current image width
    var height = $(this).height();  // Current image height

    // Check if the current width is larger than the max
    if(width > maxWidth){
        ratio = maxWidth / width;   // get ratio for scaling image
        $(this).css("width", maxWidth); // Set new width
        $(this).css("height", height * ratio);  // Scale height based on ratio
        height = height * ratio;    // Reset height to match scaled image
        width = width * ratio;    // Reset width to match scaled image
    }

    // Check if current height is larger than max
    if(height > maxHeight){
        ratio = maxHeight / height; // get ratio for scaling image
        $(this).css("height", maxHeight);   // Set new height
        $(this).css("width", width * ratio);    // Scale width based on ratio
        width = width * ratio;    // Reset width to match scaled image
    }
});
});
于 2012-09-14T09:16:22.820 に答える