減少像素和尺寸以保持完整圖像

Question

我已經制作了個人資料頁面，並且工作完美。我的問題是，當設置大尺寸的配置文件圖片（eg: 2950px X 2904px）時，jquery變慢（即動畫）和懸停，但鼠標指針移動正常。

任何人都可以提出任何解決方案，使jQuery的速度正常。

無論如何保持相同的像素和加載相同的速度jQuery的？

我用相同的像素嘗試了較小尺寸的圖像（eg: 130kb），但沒有運氣！

在此先感謝。

Answer 1

無論用戶上傳圖像的尺寸如何，您都應該有一個服務器端圖像處理系統來生成配置文件圖像大小。然後，您可以提供調整大小的圖像，而不是用戶上傳的圖像。

Answer 2

因爲我認爲你沒有顯示整個圖像的完整像素數你可以做的是使用隱藏的canvas元素作爲便箋將原始圖像繪製爲縮放。然後從畫布中獲取實際圖像（toDataUrl），並將其用作圖像元素的src。