Как добавить изображение из URL в ionic 3, используя fabricjs

Question

var canvas = new fabric.Canvas('c');

canvas.backgroundColor = 'yellow';
canvas.renderAll();
var myImg = 'http://www.logowik.com/uploads/images/511_android.jpg';


$('#addImage').on('click',addImg);

function addImg(){
    fabric.Image.fromURL(myImg, function(oImg) {
        var l = Math.random() * (500 - 0) + 0;
        var t = Math.random() * (500 - 0) + 0;                
            oImg.scale(0.2);
        oImg.set({'left':l});
                  oImg.set({'top':t});
            canvas.add(oImg);
        });
}

Я хочу добавить изображение, как указано выше, в моем приложении ionic 3. Новое в ионном. Приведенный выше код для HTML.

Заранее спасибо.

Я также внедряю fabricjs в свое приложение и создаю canvas.

Ниже приведен код для инициализации холста

ionViewDidLoad(){
this.canvas = new fabric.Canvas('c');
    let w = window.screen.width;
    let h = window.screen.height;
    this.canvas.setHeight(h/3);
    this.canvas.setWidth(w/3);
    this.canvas.renderAll();
    });
this.canvas.renderAll();
}

Answer 1

Вам нужно что-то вроде логики ниже (я не проверял это)

Определите вашу кнопку в HTML:

<button ion-button (click)="addImg()">Add Image</button>

Вы определили холст fabricjs, поэтому вам нужно просто создать прослушиватель кликов:

export class YourClassNameHere{
   //some properties to the class

   constructor(public navCtrl: NavController) {
       //some constructor logic here
   }

   //button click listener
   addImg(){
    fabric.Image.fromURL(myImg, function(oImg) {
        let l = Math.random() * (500 - 0) + 0;
        let t = Math.random() * (500 - 0) + 0;                
        oImg.scale(0.2);
        oImg.set({'left':l});
        oImg.set({'top':t});
        this.canvas.add(oImg);
    });
  }
}