无法将照片从 iPhone 添加到画布

Question

希望这只是我的错误，但我可以在 PC/android 设备上使用它。 在 iOS 上加载时，它不会将图像从设备绘制到画布（经过 safari 和 chrome 测试） 所选图像缩略图在文件输入旁边可见。

结构版本：1.5.0

测试用例：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);
  });
});

复制步骤

在 iPhone 上加载小提琴（在 iphone 5 和 5C 上测试） 使用文件输入选择图像

预期行为

图像在画布上呈现

实际行为

图像不会在画布上呈现

Answer 1

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.");
  }

}

Answer 2

这里是解决方案：

                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

你的小提琴在我的桌面 FF 上也不起作用......

主要的解决方法是将fabric.Image(image) 包装在image.onload 事件处理程序中，否则，当Fabric 尝试将其转换为其图像对象之一时，图像仍然是空的。

除此之外的修复包括将upload 处理程序直接传递给事件侦听器，并使用this.files[0] 而不是document.querySelector('...')。

固定小提琴：https://jsfiddle.net/v8jrpnu2/21/