jQuery的New Image對象可以幫助我們很方便地處理圖片,包括預加載圖片和處理圖片縮放等操作。
要預加載一張圖片,可以使用以下代碼:
var img = new Image(); $(img).on('load', function() { // 圖片加載完成時的處理代碼 }).attr('src', 'image.jpg');
我們可以在圖片加載完成后,做一些圖片相關的操作。比如將它添加到頁面中,或者在canvas中繪制出來。
在處理圖片縮放方面,可以使用以下代碼:
var img = new Image(); $(img).on('load', function() { var newWidth = 100; var newHeight = Math.round(img.height / img.width * newWidth); var canvas = $('').attr({ width: newWidth, height: newHeight }).appendTo('body')[0]; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, newWidth, newHeight); }).attr('src', 'image.jpg');
在這段代碼中,我們創建了一個canvas元素,并將它添加到頁面中。然后獲取canvas的context對象,使用它來繪制圖片。
通過jQuery的New Image對象,我們可以更加方便地處理圖片。當然,在一些特殊的場景下,我們也可以直接使用JavaScript的Image對象來完成相同的操作。