1

I have 2 divs

<div id="image-orig">
    <img src="image_example.jpg"/>
</div>

<div id="image-crop">
    <canvas id="preview" style="width:548px;height:387px"></canvas>
</div>

image_example.jpg can be image any size.

    function updatePreview(c) {
        if(parseInt(c.w) > 0) {
            var orig = $("#image-orig img")[0];
            var canvas = $("#image-crop canvas")[0];
            var context = canvas.getContext("2d");

            context.drawImage(orig,
                c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff,
                0,0,canvas.width,canvas.height
            );
        }
     }

    $(function(){
            $('#image-orig img').Jcrop({
                onSelect: updatePreview,
                onChange: updatePreview,
                aspectRatio : parseFloat($('#image-orig img').width()/$('#image-orig img').height())
            });
    });

coeff - it's coefficient if size image larger div preview.

That's problem: http://dbwap.ru/3725988.png

In second div (canvas). Quality image very low.

SOLUTION IS FOUND

            canvas.width = c.w*coeff;
            canvas.height = c.h*coeff;

            context.drawImage(orig,
                c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff,
                0,0,c.w*coeff,c.h*coeff
            );
            $(that.el).find("#ImageCode").attr('src', canvas.toDataURL());
            $(that.el).find("#ImageCode").show();

I'm just creating image tag and copying from canvas to image.

4

1 に答える 1

1

.netにアクセスできる場合は、JCropを使用して新しい画像の保存方法を変更できます：http： //mironabramson.com/blog/post/2009/04/Cropping-image-using-jQuery,-Jcrop-and- ASPNET.aspx

サーバーサイド（.net / php）を使用せずに利用できるソリューション：

まず、JCropを使用するときに、html5キャンバス画像のスムージングが有効になっていることを確認してください。

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

それがすでに設定されているか、効果がない場合は、各ブラウザで利用できる画像オプションを調査するための他の唯一のオプションだと思います。

Mozillaでスムージングを有効にする-例としてこの記事を参照してください（「mozImageSmoothingEnabled」を探してください）：https ：//developer.mozilla.org/en/Canvas_tutorial/Using_images#Controlling_image_scaling_behavior

IEでフィルターを適用する：http ：//code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/

注：機能する可能性のあるある種のFlashソリューションがあるかもしれませんが、FlashソリューションをJCropおよびhtml5キャンバスと組み合わせるのはおそらく難しすぎるでしょう。

于 2012-06-06T15:10:44.200 に答える