2016-08-19 73 views
0

我有了的1920×1080尺寸的一個,但我的當前畫布只有一個大小爲800x600大圖像時保持圖像質量..縮放圖像到背景的大小像素化/降低圖像的質量。即使在導出時,圖像質量仍然很低..我如何防止這種情況發生?fabric.js如何作爲背景使用,並調整到畫布的大小

var background = 'image.jpg'; 
    canvas.setBackgroundImage(background, canvas.renderAll.bind(canvas), { 
        width: canvas.width, 
        height: canvas.height, 
        originX: 'left', 
        originY: 'top' 
       }); 

回答

4

我不確定面料有辦法改善這一點。做大規模可能會導致這種質量下降。在我們的應用程序中,我們使用名爲pica的庫來調整圖像質量。

pica repo here

pica demo here

你可以使用這個庫縮放圖像的圖像下來之前將其添加到畫布或甚至當畫布大小調整。

+0

嗨!我的項目將被集成到一個php後端,它將圖像轉換爲pdf。是否有可能也將這與PHP集成或是否有可能導出調整大小的圖像與PHP的toDataURL()畫布功能? –

+1

要麼你可以使用PHP和ImageMagick的調整圖像大小它到達瀏覽器之前,也許你可以有織物(上渲染)擴展到全尺寸和全尺寸輸出的圖像,然後調整在後端圖像。似乎事先調整圖像將是最好的選擇。 – StefanHayden

2

或者您可以使用fabricjs的一個調整濾波器來獲得圖像的更好版本的比例縮減。 無論如何,他們並不是很好。

您可以輕鬆地實現與PICA和fabricjs調整的連接,異食癖發生在輸入的元素,讓你在這是多了還是少了什麼fabricjs過濾器做輸出的畫布。

+0

你好!我嘗試使用使用Lanczos 3的圖像大小調整,但進一步調整大小仍然會降低圖像質量。另外,有時它會使瀏覽器崩潰。 –