-1

在我的項目中，我有一個帆布（200 * 150），我想繪製尺寸（800 * 600）的圖像。結果是圖像變得更藍（不光滑和清晰），但是如果我們將該圖像放在標籤上，它看起來很好。那麼我們該如何處理呢？謝謝。在小帆布上繪製的大圖像變得模糊

<img src="http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg" 
width="200" heigh="150" /> 
<canvas id="my_canvas" width="200" height="150"></canvas> 
<script type="text/javascript"> 
    window.onload = function() { 
     var context = document.getElementById("my_canvas").getContext("2d"); 
     var image = new Image(); 
     image.src = "http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg"; 
     image.onload = function() { 
      context.drawImage(image, 0, 0, context.canvas.width, context.canvas.height); //dx-30, GY-28, GW+50, GH+35 
     } 
    } 
</script>

來源

2013-08-30 Pon Somean

你可以添加代碼或更好地爲該畫布做一個小提琴嗎？「 – rps

」這裏有來自我的引擎的聲音..「:-)作爲rps，你需要給我們多一點看看，最好作爲一個小提琴（http://jsfiddle.net）。您還應該在您的帖子中包含重現問題的代碼。 – K3N

也許在服務器端或圖像編輯器中將圖像調整爲200x150。恕我直言，雖然畫布調整大小的圖像相對於IMG略微像素化，但在這種尺寸下並不是那麼明顯。（例如，在400x300處更加明顯的像素化） – markE

原因

瀏覽器可以根據當前情況下優先考慮質量和性能。

對於大多數頁面而言，圖像質量通常優先於性能。但是對於畫布性能來說，不如直接瀏覽器渲染和CSS，因此使用畫布進行插值可能會在質量之前優先考慮性能。取決於瀏覽器的實施。

解決方案

幸運的是排序，如果你喜歡做它在兩個（或更多）的步驟，或一箇中間步驟拆分與調整大小和插值的負擔來解決此問題的方法。

中間步驟將首先將圖像縮放50％到屏幕外畫布。然後使用該畫布繪製到最終尺寸。對於更大的圖像，可能需要更多的步驟。

總和花費的時間大致相同，因爲獲得新尺寸的操作總和相同（更簡單地說：用中間步x2插入更少，插入x1插入更多），所以你不會注意到性能大大降低。

但最重要的是：結果會比僅僅一個步驟更好。

實施

這是如何實現的一箇中間步驟：

image.onload = function() { 

    /// create an extra step for re-sizing image 
    var tmpCanvas = document.createElement('canvas'), 
     tmpContext = c.getContext('2d'); 

    /// set this canvas to 50% of image 
    tmpCanvas.width = image.width * 0.5; 
    tmpCanvas.height = image.height * 0.5; 

    /// draw image step 1 
    tmpContext.drawImage(image, 0, 0, image.width * 0.5, image.height * 0.5); 

    /// draw image step 2 
    context.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height); 
}

演示（驗證的概念）

ONLINE DEMO HERE

結果將是：

snapshot of result
^{左圖：IMG元素。右圖：畫布兩個步驟（在Firefox中呈現）}

正如您所看到的，圖像和畫布元素之間現在沒有明顯區別。

來源

2013-09-01 06:39:57 K3N

謝謝你肯，它對我有用 –

@PonSomean很高興能幫到你！請考慮接受答案（這將結束這個問題，我們誰回答得到一些榮譽）。 – K3N

在小帆布上繪製的大圖像變得模糊

回答

原因

解決方案

實施

演示（驗證的概念）

相關問題