5

Fabric.js キャンバスでは、画像オブジェクトの src を高解像度画像に置き換えて、使用時の画質を維持しようとしていcanvas.toDataURLWithMultiplierます。

画像オブジェクトの src を変更すると、そのすべてのプロパティも変更されます。画像オブジェクトは自動的に別のサイズにスケーリングされ、すべての状態プロパティが変更されます。

これはバージョン 0.9.15 から発生します。バージョン 0.8.32 を使用すると動作します。バージョン 0.8.32 にはこの問題はありません。

コードは次のとおりです。

<body>
    <button id="click" onclick="changeImage()">Change Image</button>

    <canvas id="canvas" width="300px" height="300px" style="border:2px solid #000;">
<script>

    canvas = new fabric.Canvas('canvas');
    fabric.Image.fromURL("http://timeplusq.com/dakshin/clip03.png", function(obj) {

    canvas.add(obj.scale(1).rotate(-15).set({ 
        left: 80, top: 95 
    }));

    });

    function changeImage(){
     var tmp=canvas.item(0).getElement();
     var src = tmp.src;      

     tmp.setAttribute("src", 'http://timeplusq.com/dakshin/clip03original.png'); 

    //Its a 106KB size image

    canvas.renderAll();
    canvas.calcOffset();               
    }​

    </script>  
</body>

画像オブジェクトの初期状態のプロパティを取得してから、変更された画像オブジェクトの値を設定しようとしました。しかし、うまくいきませんでした。

この問題の解決策はありますか?

4

2 に答える 2

5

.widthおよび.height属性が明示的に設定されていない場合、これらは画像から値を読み込み、画像が変更されるたびに読み込みます。

その後、値を明示的に設定すると、次の画像が読み込まれたときにそれらの値が保持されます。

var img = new Image();

img.onload = function() {
    this.width = this.width;
    this.height = this.height;

    // subsequent image loads will be forced to this first image's size
    img.src = 'image2.jpg';
}

img.src = 'image1.jpg';
于 2012-10-30T15:46:15.667 に答える
1

//setSRC関数を使用してください、私にとってはうまくいきます!!!

var ancho_original= item_Activo_canvas.width;
var alto_original= item_Activo_canvas.height;


item_Activo_canvas.setSrc(base64Img  , function(img) {
	      
            item_Activo_canvas.set({width: ancho_original, height: alto_original});
            canvas.renderAll();
            item_Activo_canvas.setCoords();
			 console.log('cargado onload'); 
        });

于 2017-01-20T05:52:22.990 に答える