Question

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

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')

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

Answer 1

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

也许您可以尝试picture tag，目前很少有浏览器支持此

Answer 2

客户端解决方案：

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

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

使用此tutorial
Here使用上述功能下载画布的简便方法：

希望这个帮助

Answer 3

使用canvas（客户端）可以进行图像调整大小，我已经创建了以下代码来调整图像大小。

＆＃13;

<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" />

＆＃13;

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

3 个答案: