我们可以使用jquery调整图像大小吗？答案

【问题标题】：Can we resize image using jquery?我们可以使用jquery调整图像大小吗？
【发布时间】：2016-07-22 05:56:46
【问题描述】：

是否可以在不使用任何服务器端脚本的情况下从 url 下载图像并使用 jquery 物理调整图像大小？我进行了很多搜索，但没有找到任何解决方案。

【问题讨论】：

“物理”调整图像大小是什么意思？您希望这样一个进程的输出到哪里，到屏幕、到本地文件或返回到服务器？
Jquery resizing image的可能重复
"physically" 调整大小意味着我想在本地下载图像并希望创建尺寸更小的新图像。例如，如果我下载的图片大小为 1 MB，那么我想将其大小减小到 200kb。
@abhisek 我不想改变图像的尺寸所以那个 url 不是我的问题的解决方案

标签： javascript jquery html jquery-ui jquery-plugins

【解决方案1】：

如果你需要下载，你可以像这样使用画布

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

【讨论】：