我們可以使用jquery調整圖像大小嗎？

是否有可能從url下載圖片並使用jquery實際調整圖片大小而不使用任何服務器端腳本？我已經做了很多搜索，但沒有找到任何解決方案。我們可以使用jquery調整圖像大小嗎？

2016-07-22 Vipin Singh

「物理」調整圖像大小意味着什麼？你期望這樣一個過程的輸出到屏幕，到本地文件，還是回到服務器？ – nnnnnn

[jquery resizing image]可能的重複（http://stackoverflow.com/questions/1143517/jquery-resizing-image） – abhishek

「物理」調整大小意味着我想在本地下載圖像，並希望創建新的圖像與較小的尺寸。例如，如果我已經下載大小爲1 MB的圖像，那麼我想將其大小減小到200kb。 –

如果您需要下載，你可以使用畫布這樣

HTML

<canvas id="c" width="200" height="150"></canvas> 
<a id="download">Download as image</a>

的JavaScript

// Grab the Canvas and Drawing Context 
var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 
// Create an image element 
var img = document.createElement('IMG'); 
// Specify the src to load the image 
img.setAttribute('crossOrigin', 'anonymous'); 
img.src = "http://i.imgur.com/adB2oag.png"; 
// When the image is loaded, draw it 
img.onload = function() { 
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); 
} 

function downloadCanvas(link, canvasId, filename) { 
    link.href = document.getElementById(canvasId).toDataURL(); 
    link.download = filename; 
} 

document.getElementById('download').addEventListener('click', function() { 
    downloadCanvas(this, 'c', 'test.png'); 
}, false);

放圖像畫布，只要你喜歡大小的圖片，並下載畫布圖片

你可以試試這個jsFiddle

來源

2016-07-22 06:43:32

我們可以使用jquery調整圖像大小嗎？

回答

相關問題