无法将照片从 iphone 添加到 canvas

Question

希望这只是我的错误，但我已经在 PC/android 设备上工作了。在 iOS 上加载时，它不会从设备绘制图像到 canvas（经过 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 上加载 fiddle（在 iphone 5 和 5C 上测试）使用文件输入 select image

预期行为

图像在 canvas

上呈现

实际行为

图像未在 canvas

上呈现

Answer 1

你的 fiddle 在我的桌面 FF 上也不起作用...

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

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

固定 fiddle : 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.");
  }

}

无法将照片从 iphone 添加到 canvas

unable to add photo from iphone to canvas

html

javascript

canvas

ios

fabricjs