Изменение сгенерированного изображения с разрешением Fabric.js

Question

Я создаю редактор изображений на основе Fabric.js, но у меня проблема с окончательным разрешением изображения. Мне нужно сгенерированное изображение с высоким разрешением, но размер моего редактора находится в пикселях с низким разрешением.

Например: холст 800px x 600px, и мне нужно окончательное изображение размером 100 см х 400 см, другими словами, в реальном размере.

Answer 1

Позволь мне некоторое представление из моего опыта здесь -

1. , если окончательное решение является большим, но не экстремальное большим, вы можете сделать трансфокатор холст его размера, прежде чем генерировать данные изображения (toDataURL, например)
2. , если окончательное решение является крайним большим, я полагаю, вы можете иметь дело с ним из PHP непосредственно

для первого -

var originWidth = canvas.getWidth(); 

    function zoom (width) 
     { 
      var scale = width/canvas.getWidth(); 
      height = scale * canvas.getHeight(); 

      canvas.setDimensions({ 
       "width": width, 
       "height": height 
      }); 

      canvas.calcOffset(); 
      var objects = canvas.getObjects(); 
      for (var i in objects) { 
       var scaleX = objects[i].scaleX; 
       var scaleY = objects[i].scaleY; 
       var left = objects[i].left; 
       var top = objects[i].top; 

       objects[i].scaleX = scaleX * scale; 
       objects[i].scaleY = scaleY * scale; 
       objects[i].left = left * scale; 
       objects[i].top = top * scale; 

       objects[i].setCoords(); 
      } 
      canvas.renderAll(); 
    } 

    zoom (2000); 

    // here you got width = 2000 image 
    var imageData = canvas.toDataURL({ 
      format: 'jpeg', 
      quality: 1 
     }); 
    zoom (originWidth); 

Я никогда не пробовал его на 100см х 400см, потому что это очень большой, поэтому, если вы не можете сделать это из fabric.js, сделайте это в PHP или иначе, эта ссылка может помочь Convert SVG image to PNG with PHP

100см = 39,3 дюйм и 400 см = 39,3 * 4 дюйма, если у вас есть 300 точек на дюйм для окончательного вывода. Вам понадобится ширина = 39,3 * 300 и высота 39,3 * 4 * 300, если браузер может справиться с этим или нет, я не уверен.