unable to add photo from iphone to canvas

Question

hopefully this is just my error but i have this working on PC/android devices. When loaded on iOS it doesnt draw images from device to canvas (safari and chrome tested) The chosen image thumbnail is visible next to the file input.

Fabric Version : 1.5.0

Test Case : https://jsfiddle.net/v8jrpnu2/18/

window.addEventListener('load', function onLoad() {
  photo = new fabric.Canvas('photo')
  photo.setWidth(600);
  photo.setHeight(600);
  photo.backgroundColor = '#eee';
  photo.renderAll();

  var upload = function(e) {
      var reader = new FileReader();
      var file    = document.querySelector('input[type=file]').files[0];

      reader.onload = function(e){

        contents = e.target.result;
        var image = new Image();

        image.src = contents;

        var Cimage = new fabric.Image(image);
        photo.add(Cimage);

        photo.renderAll();
      }
      if(file) {
        reader.readAsDataURL(file);
      }
    }

  $('#upload-input').on('change', function(e){
    upload(e);
  });
});

Steps to reproduce

load fiddle on iPhone (tested on iphone 5 and 5C) use file input to select image

Expected Behavior

image renders on canvas

Actual Behavior

image does not render on canvas

Answer 1

Your fiddle didn't worked on my desktop FF either...

The main fix is to wrap your fabric.Image(image) inside the image.onload event handler, otherwise, the image is still empty when Fabric tries to convert it in one of its Image Object.

Aside fixes consist in passing directly the upload handler to the event listener, and to use this.files[0] instead of document.querySelector('...') .

Fixed fiddle : https://jsfiddle.net/v8jrpnu2/21/

Answer 2

here is the solution gig :

                fabric.Image.fromURL(imageurl, function(oImg) {
                        oImg.crossOrigin = 'anonymous'
                        oImg.setWidth(wantedwidth); // additional
                        oImg.setHeight(wantedheight); // additional
                        oImg.set('left', 0).set('top',0), // additional
                        yourcanvas.add(oImg);
                        yourcanvas.renderAll()
                        yourcanvas.setActiveObject(oImg) // if you want to set the image active

                        });

Answer 3

function readURLForSticker(input) {
  TypeBelettering = "sticker";
  if (input.files && input.files[0]) {
    var imgs = new Image();
    imgs.onload = function () {
      originalImageHeightPX = this.height;
      originalImageWidthPX = this.width;
      imageHeightMM = originalImageHeightPX * 0.2645833333;
      imageWidthMM = originalImageWidthPX * 0.2645833333;


    };
    imgs.onerror = function () {
      alert("not a valid file: " + file.type);
    };
    urlLogo = _URL.createObjectURL(input.files[0]);
    imgs.src = urlLogo;
    reader = new FileReader();

    reader.onload = function (e) {
      imgs.src = e.target.result;

      stickerImage = new fabric.Image(imgs);
      canvas.add(stickerImage);
      canvas.centerObject(stickerImage);
      canvas.setActiveObject(stickerImage);
      canvas.renderAll();
          }

    reader.readAsDataURL(input.files[0]);
    alert("Als u een afbeelding wilt uploaden kan het zijn dat deze verborgen staat achter een tekst of eerder geplaatst ontwerp. U ziet wel een selectieveld van de afbeelding. Sleep deze een beetje en uw afbeelding wordt zichtbaar.");
  }

}