更改生成的圖像分辨率Fabric.js

Question

我正在創建基於Fabric.js的圖像編輯器，但是我的最終圖像分辨率有問題。我需要高分辨率的生成圖像，但我的編輯器的尺寸在低分辨率像素。

例如：canvas有800px x 600px，我需要一幅100cm x 400 cm的最終圖像，換句話說，就是實際大小。

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); 

我從來沒有嘗試過的百釐米X400釐米，因爲它是真正的大，因此，如果您不能從fabric.js做，做在PHP否則，該鏈接可幫助Convert SVG image to PNG with PHP

100釐米= 39.3英寸和400釐米= 39.3 * 4英寸，如果你有300dpi圖像的最終輸出。你需要width = 39.3 * 300和height爲39.3 * 4 * 300的大小，如果瀏覽器可以處理它或不是，我不確定。