如何在打開外部圖像時提高性能？

Question

這是我正在打開外部圖像現在（角）：

$http({ 
    method: "GET", 
    url: imageURL.full, 
    responseType: "blob" 
}).then(function(res) { 
    var reader = new FileReader(); 
    reader.readAsDataURL(res.data); 
    reader.onload = function(e) { 
     canvas.loadMainImage(e.target.result); 
     $rootScope.started = true; 
     $rootScope.uploaded = true; 
     $rootScope.changeStyling(); 
    }; 
    }, 
    function(res) { 
    console.log("For some reasons it failed to open", res); 
    }); 

如何，我將它添加到畫布：

// canvas.loadMainImage功能

fabric.util.loadImage(url, function(img) { 

    //img.crossOrigin = 'anonymous'; 

    object = new fabric.Image(img, canvas.imageStatic); 
    object.name = 'mainImage'; 

    if (width && height) { 
    object.width = width; 
    object.height = height; 
    } 

    canvas.mainImage = object; 

    canvas.fabric.forEachObject(function(obj) { 
    if (obj.name == 'mainImage') { 
     canvas.fabric.remove(obj); 
    } 
    }); 

    canvas.fabric.add(object); 
    object.top = -0.5; 
    object.left = -0.5; 
    object.moveTo(0); 

    canvas.fabric.setHeight(object.height); 
    canvas.fabric.setWidth(object.width); 

    canvas.original.height = object.height; 
    canvas.original.width = object.width; 

    $rootScope.canvaswidth = canvas.original.width; 
    $rootScope.canvasheight = canvas.original.height; 

    $rootScope.calculateImageType(canvas.original.width, canvas.original.height); 

    if ($rootScope.gridadded) { 
    $rootScope.removeGrid(); 
    $rootScope.addGrid(); 
    } 

    if (!dontFit) { 
    canvas.fitToScreen(); 
    } 

    $rootScope.$apply(function() { 
    $rootScope.$emit('editor.mainImage.loaded'); 
    }); 

    if (callback) { 
    callback(); 
    } 
}); 

它除了那些情況以外，工作情況良好，那麼圖像是3000x3000,4000x4000,5000x5000或更大的尺寸。我該如何改進我的解決方案？也許，網絡工作者可以做什麼？

Answer 1

由於您的問題標題引用了性能，我認爲這是您想要改進的代碼方面。有幾種方法可供您使用。

1. 優化圖像。正如Thanh所建議的，如果您可以控制圖像，則可以使用壓縮進行優化。尺寸保持不變，但細節水平會更低（取決於壓縮技術，可能不太明顯）。瀏覽器將能夠更快地加載和顯示圖像。

2. 修改用戶界面。通過修改界面來改變用戶對頁面的看法。一個可用的簡單例子是切換到逐行JPEG編碼。該編碼允許瀏覽器快速渲染圖像的粗糙（通常是像素化）版本，然後填寫細節。用戶馬上看到某種形式的圖像，因此他們認爲該頁面更快。更激烈的選擇是添加進度指示器，然後只在圖像渲染完成後纔將其刪除。用戶沒有馬上看到圖像，但至少該頁面看起來像在忙着做一些有意義的事情，而不是（顯然）等待圖像。

這兩個選項不是唯一的。