畫布縮小圖像質量損失

我編寫了縮放和縮小畫布圖像的代碼，但如果嘗試多次縮放圖像，圖像質量正在改變。這是我使用canvas2image插件的代碼，我將canvas轉換爲普通圖像。畫布縮小圖像質量損失

任何機構請建議我是否有任何錯誤的方式，我正在做的事情。

function imgZoom(operation) { 
    var zoomImageObj = document.getElementById("originalImage"); 
    var zoomedCanvas = $("#zoomCanvasPreview")[0]; 
    var zoomedContext = zoomedCanvas.getContext("2d"); 

    var selectedImgWidth = $('#originalImage').width(); 
    var selectedImgHeight = $('#originalImage').height(); 

    $("#zoomCanvasPreview").attr("height", selectedImgHeight); 
    $("#zoomCanvasPreview").attr("width", selectedImgWidth); 

    var previewHeight = $("#zoomCanvasPreview").height(); 
    var previewWidth = $("#zoomCanvasPreview").width(); 

    var zoomFactor = $("#zoomFactor option:selected").val(); 

    // Making the zoomfactor string as float point then parsing for addition 

    // zoomFactor values if user selected 5%(0.05), 10%(0.1), 15(0.15) &etc 
    var zoomPercent = 1 + parseFloat(zoomFactor); 

    if(operation == 'zoomIn') { 
     newZoomWidth = Math.round(previewWidth * zoomPercent) ; 
     newZoomHeight = Math.round(previewHeight * zoomPercent) ; 
    } else if(operation == 'zoomOut'){ 
     newZoomWidth = Math.round(previewWidth/zoomPercent); 
     newZoomHeight = Math.round(previewHeight/zoomPercent); 
    } 

    if((newZoomWidth >= 0) && (newZoomHeight >= 0)) 
    { 
     $("#zoomCanvasPreview").attr("width", newZoomWidth);  
     $("#zoomCanvasPreview").attr("height", newZoomHeight); 

     // Drawing the image to canvas 
     zoomedContext.drawImage(zoomImageObj, 0, 0, imgWidth, imgHeight, 0, 0, newZoomWidth, newZoomHeight); 

     //return canvas.toDataURL("image/png"); 
     var zoomedCanvas = $("#zoomCanvasPreview")[0]; 

     oImgConvertExt = Canvas2Image.saveAsPNG(zoomedCanvas, true); 
     $("#originalImage").attr("src", oImgConvertExt.src); 
     $("#originalImage").attr("style", "display: none; visibility: hidden; width: "+newZoomWidth+"px; height: "+newZoomHeight+"px;"); 
    } else { 
     alert("Reached maximum zoom out limit"); 
    } 
}

來源

2012-10-16 vvr02

圖像質量不會得到改變如果您使用的格式.SVG 的圖像，即使您放大或縮小

來源

2013-06-07 09:17:18 Rash

這些圖像將永遠不會得到扭曲周圍有，如果你使用的質量損失沒有辦法canvas.drawImage()。

通過改變CSS width和height值只是放大。那麼不會有任何質量損失。

這也是簡單很多代碼...

來源

2014-02-11 12:06:12

畫布縮小圖像質量損失

回答

相關問題