8

私は、ユーザーが動的なスライドショーを作成できるようにするWebアプリに取り組んでいます。現在、コンピューターのユーザーからキャンバスに画像を追加する方法に関係なく、問題が発生しています。私は入力ボタンを使用してコンピューターからファイルを取得していますが、これは画像をキャンバスに追加する機能をアピールします。

これまでのところ、これだけでなく、キャンバスに画像を追加するさまざまな方法を試しました：動的に画像をキャンバスに追加します

ただし、ここに示すコードは、画像をキャンバスに描画するだけで、FabricsjsのKitchensink.jsデモのようにドラッグやサイズ変更ができないため、私の場合は機能しません。

また、画像をBase64に変換し、LoadJSONを使用して元に戻すことも試みましたが、次のエラーが発生しました。

Uncaught TypeError: Cannot read property 'length' of undefined fabric.js:2089
enlivenObjects fabric.js:2089
fabric.util.object.extend._enlivenObjects fabric.js:9025
fabric.util.object.extend.loadFromJSON fabric.js:8953
sub

Subは、画像を追加するために呼び出した関数を指します。

私もこのコードを試しました：

document.getElementById('imgLoader').onchange = function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new fabric.Image();
img.onload = function(){
img.set({
    left : 250,
    top : 250,
    angle : 20,
      padding: 10,
      cornersize: 10
    });
    image.scale(getRandomNum(0.1, 0.25)).setCoords();
    canvas.add(image);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

これらのエラーをキャッチするもの：

Uncaught TypeError: Cannot read property 'width' of undefined fabric.js:14358
fabric.Image.fabric.util.createClass._setWidthHeight fabric.js:14358
fabric.Image.fabric.util.createClass._initConfig fabric.js:14334
fabric.Image.fabric.util.createClass.setElement fabric.js:14127
fabric.Image.fabric.util.createClass._initElement fabric.js:14322
fabric.Image.fabric.util.createClass.initialize fabric.js:14097
(anonymous function) fabric.js:2679
klass fabric.js:2728
reader.onload diapo.js:746

私は明らかにアイデアを使い果たして、画像を描くことだけを達成しましたが、それをキャンバスに追加することはしませんでした。

オールインワンで、Kitchensinkデモのようにドラッグ可能であるかどうかに関係なく、同じ属性でFabricjsキャンバスに画像を追加したいと思います。よろしくお願いします:)

4

2 に答える 2

16

コードに1つの基本的な間違いがあります。それは、fabric.Imageオブジェクトのsrc属性に画像データを追加しようとしていることです。

あなたがする必要があるのは、あなたの結果でImageオブジェクトを作成し、それを次のようにfabric.Imageオブジェクトに渡すことです：

var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
  var image = new fabric.Image(imgObj);
}

ここで実用的な例を作成しました：http： //jsfiddle.net/jaibuu/Vp6wa/

于 2013-03-05T17:55:13.957 に答える
3

Fabricjsによってコンピューターからキャンバスに画像をアップロードします。

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});
canvas{
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

于 2016-05-06T12:52:32.083 に答える