3

バイナリ文字列からキャンバスに画像を描画しようとしています。

 var reader = new FileReader();
     //reader.readAsDataURL(file);
     reader.readAsBinaryString(file);
     reader.onload = function(event){
         var d = $(thisObj.CreateIndoorFormDivControlName).dialog();
         var canvas =document.getElementById('canvasfloorLayout');
        var cxt=canvas.getContext("2d");
         var img=new Image();
            img.onload = function() {
                cxt.drawImage(img, 0, 0,canvas.width,canvas.height);
            }
            img.src = "data:image/jpeg;base64,"+window.btoa(reader.result);

上記のコードを使用していますが、問題は、画像サイズがキャンバスサイズに縮小され、品質が低下していることです。私は試されました

cxt.drawImage(img, 0, 0,img.width,img.height);

ただし、画像はトリミングされます。バイナリをサーバーに投稿する必要があるため、reader.readAsDataURLを使用したくありません。私の要件は、完全な画像を表示し、その上に線を引くことです。

4

1 に答える 1

4 
canvas.width  = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

...キャンバスのネイティブ解像度で画像を描画する場合、画像が拡大縮小されると、明らかに品質が低下します。

...画像を画像のネイティブ解像度で描画しても、キャンバスのサイズが変更されていない場合は、部分的な画像、または部分的に塗りつぶされたキャンバスになります。

したがって、どちらも必要ない場合は、キャンバスのサイズを画像のサイズと一致するように設定すると、データ画像の解像度と一致するキャンバス描画画像が作成されます。

編集

2つの間にプロキシの例を追加します。

var img = new Image(),
    canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"), 
    // ......etc


    dimensions = {
        max_height : 800,
        max_width  : 600,
        width  : 800, // this will change
        height : 600, // this will change
        largest_property : function () {
            return this.height > this.width ? "height" : "width";
        },
        read_dimensions : function (img) {
            this.width = img.width;
            this.height = img.height;
            return this;
        },
        scaling_factor : function (original, computed) {
            return computed / original;
        },
        scale_to_fit : function () {
            var x_factor = this.scaling_factor(this.width,  this.max_width),
                y_factor = this.scaling_factor(this.height, this.max_height),

                largest_factor = Math.min(x_factor, y_factor);

            this.width  *= largest_factor;
            this.height *= largest_factor;
        }
    };


dimensions.read_dimensions(img).scale_to_fit();

canvas.width  = dimensions.width;
canvas.height = dimensions.height;
context.drawImage(img, 0, 0, dimensions.width, dimensions.height);
于 2013-03-11T09:25:07.847 に答える