無法將照片從 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

你的小提琴也沒有在我的桌面 FF 上工作......

主要的修復方法是將您的image.onload fabric.Image(image)包裝在image.onload事件處理程序中，否則，當 Fabric 嘗試將其轉換為它的圖像對象之一時，圖像仍然是空的。

旁邊的修復包括將upload處理程序直接傳遞給事件偵聽器，並使用this.files[0]而不是document.querySelector('...') 。

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

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

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

}