Блог

Я пытаюсь наложить другое изображение (SVG) поверх загруженного пользователем изображения (например, JPEG) с Fabric.js . Я просто не могу заставить изображение SVG отображаться.

Это то, что у меня есть в:

HTML

 <canvas id="canvas" width="128" height="128"></canvas>
<input type="file" id="upload">
  

JS

 var svg = 'data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="480pt" id="logo" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 480" width="480pt">...</svg>';

var canvas = new fabric.StaticCanvas('canvas');

document.getElementById('upload').addEventListener("change", function (e) {

  var file = e.target.files[0];
  var reader = new FileReader();

  reader.onload = function (f) {
    canvas.clear();
    var data = f.target.result;
  
    // Image
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({
        left: 0,
        top: 0
      });
      if (oImg.width > oImg.height) {
        oImg.scaleToHeight(128);
      } else {
        oImg.scaleToWidth(128);
      }
      canvas.add(oImg).centerObject(oImg).renderAll();
    });

    // Logo
    fabric.Image.fromURL(svg, function(img) {
      var logo = img.set({
        width: 48,
        height: 48,
        bottom: 8,
        right: 8,
        opacity: 1
      });
      canvas.add(logo).renderAll();
    });

    var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
  };
  reader.readAsDataURL(file);
});
  

Загруженные пользователем изображения отображаются нормально, но не тот SVG, который я пытаюсь разместить сверху.

Я думаю, что все, чего вам не хватало, это закодировать svg, смотрите Пример ниже:

 function svgimage() {
  var image = `<svg xmlns="http://www.w3.org/2000/svg" width="220" height="200" version="1.1"><defs><radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="20%" fy="40%"><stop offset="0%" style="stop-color:gray;stop-opacity:0"/><stop offset="100%" style="stop-color:blue;stop-opacity:1"/></radialGradient></defs><ellipse cx="110" cy="100" rx="110" ry="100" style="fill:url(#grey_blue)"/></svg>`;
  return encodeURIComponent(image);
}

var canvas = new fabric.StaticCanvas('canvas');

document.getElementById('upload').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();

  reader.onload = function(f) {
    canvas.clear();
    var data = f.target.result;

    // Image
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({left: 0, top: 0});
      if (oImg.width > oImg.height) {
        oImg.scaleToHeight(128);
      } else {
        oImg.scaleToWidth(128);
      }
      canvas.add(oImg).centerObject(oImg).renderAll();
    });

    // Logo
    fabric.Image.fromURL('data:image/svg xml;charset=utf-8,'   svgimage(), function(img) {
      var logo = img.set({width: 148, height: 148, bottom: 8, right: 8, opacity: 1});
      canvas.add(logo).renderAll();
    });

    var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
  };
  reader.readAsDataURL(file);
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

<input type="file" id="upload"><br>
<canvas id="canvas" width="200" height="200"></canvas>