data：image / jpg; base64在新标签页中打开并调整大小/缩小

Question

我有一个input type=file元素的预览按钮，该按钮可在新标签页上打开所选图像：

var image = new Image();
image.src = "data:image/jpg;base64," + myImageDataUrl;

var w = window.open("");
w.document.write(image.outerHTML);

问题在于，超出浏览器高度和宽度的图像将以全尺寸显示，要求用户使用窗口的滚动条查看图像。有没有办法缩小/缩小图像，使其小于或等于浏览器的尺寸？

我尝试将图像包装到<div style='max-height: 100%; max-width: 100%'>中，但没有成功。

Answer 1

您需要将图像的高度和宽度设置为100％。

image.height = '100%';
image.width = '100%';