如何更改图像的大小并使用jquery下载

How to change the size of an image and download it with jquery?

本文关键字：jquery 下载 何更改 图像      更新时间：2023-09-26

我希望能够根据函数的参数下载不同高度和宽度的相同图像。这是我的代码：

function Download(name, QRsrc, height, width) {
if (name.length > 20) {
    name = name.substring(0, 20);
}
var a = $("<a>")
    .attr("href", QRsrc)
    .height(height)
    .width(width)
    .attr("download", name)
    .appendTo("body");
a[0].click();
a.remove();
}

我把这个函数叫做

Download('@survey.Name.Replace(" ","_")','@QRsrc','200','200')

但它不起作用。下载图像的大小不会随参数而变化。我该如何解决这个问题。谢谢你的帮助。

  1. 您需要在服务器上编写调整图像大小的方法
  2. 调用您的远程方法

也许你可以试试图片标签，目前很少有浏览器支持这个

客户端解决方案：

高度和宽度属性只是css规则，它们不会改变原始图像的大小。。。。您可以使用基于原始图像的新画布。

function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}
  • 使用本教程创建画布
  • 下面是使用上面的功能下载画布的简单方法：

希望这能帮助

可以使用画布（客户端）调整图像大小，我创建了以下代码来调整图像大小。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var resizeImage = function(src,width,height) {
	var orig_src = new Image(),
	resize_canvas = document.createElement('canvas');
	orig_src.src = src;
	resize_canvas.width = width;
	resize_canvas.height = height;
	resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
	$(".resize-image").attr('src', resize_canvas.toDataURL("image/png"));
}
$(function(){
	resizeImage('image.jpg',100,100); // Image path, width, height
});
</script>
<img class="resize-image" src="image.jpg" />

相关文章：