0

在我的网站中，我动态生成位图，它需要根据浏览器的宽度和高度进行渲染，因此页面上没有溢出。

我已成功创建并渲染了图像，但我不知道如何获取浏览器的宽度和高度并将其传递给图像渲染的操作

看法：

@{
ViewBag.Title = "Index";
}
<h2>Home</h2>
<br />
<img src="@Url.Action("Image", new { height = , width = })" alt="image" usemap="#clickMap" height="" width="" />

控制器：

public ActionResult Image(int width, int height)
{
    MemoryStream stream = new MemoryStream();
    var image = DynamicImages.ImageGeneration.GetWorkflow(width, height);

    image.Save(stream, ImageFormat.Png);

    return File(stream.ToArray(), "image/png");
}

我已经在一个名为 Browser.js 的文件中放置了一个 jQuery 函数来获取屏幕高度，但我不知道如何引用它：

function getWidth() {
    return $(window).width();
}

任何人都可以帮忙吗？

4

3 回答 3

1

您可以尝试以下方法：

$("img-selector").attr("src", "@Url.Action("Image")" + "?height=" + getHeight() 
    + "&width=" + getWidth());
于 2012-04-18T11:47:14.933 回答
1

我设法让这个工作。我没有在页面中添加图像元素并更改源，而是在函数中生成了一个图像标签并将其添加到页面中的 div 中。至于对操作的调用，我对 url 调用进行了硬编码（这就是 @Url.Action() 所做的），这是我的代码：

@{
ViewBag.Title = "Index";
}
<h2>Home</h2>
<br />
<script type="text/javascript">

    $(document).ready(function () {
        renderWorkflow();
    });

    function renderWorkflow() {
        var width = $(window).width();
        var height = $(window).height();
        var imageLink = "<img id=\"workflow\" src=\"/Home/WorkflowImage?width=" + width + "&height=" + height + "\" alt=\"Workflow Image\" />";

        $("#workflowImage").html(imageLink);
    }

</script>
<div id="workflowImage">
    <p>Java script must be enabled in order to render the workflow</p>
</div>
<map id="clickMap" name="clickMap">
</map>
于 2012-04-19T11:52:15.000 回答
0

你可以做一个ajax请求来做到这一点

<script type="text/javascript">
  var Height = //get height
  var Width = // get width

 $.get('@Url.Action("Image", "Controller")', { width: width, height: Height}, function (data) {              

        });
</script>
于 2012-04-18T11:45:43.783 回答