jquery - 如何通过在请求中传递宽度参数来调整图像大小？

问题描述

我想要我的压缩图像，但是我不想在上传时压缩它们，我不想使用 css 或类似的东西来调整宽度和高度。我想调用如下图像：

<img src="/images/exaple.png?width200px">

我的图像是 2000px x 1000px 在我的页面上将是 200px x 100px。

我只找到了你需要付费的程序，而且，由于我在 Windows 上工作，所以我没有 Linux 服务器来安装这个程序。

标签： jqueryhtmlasp.netimagecompression

首先，我将宽度作为变量添加=

<img src="/images/exaple.png?width=200px">

然后你需要使用asp.net来处理图片的静态文件。
像图像这样的静态文件不会从 asp.net 传递，除非你在处理程序上声明它web.config

<httpHandlers>
    <add verb="*" path="*.bmp" type="ImageHandler.HttpImageHandler,ImageHandler"/>
    <add verb="*" path="*.jpg" type="ImageHandler.HttpImageHandler,ImageHandler"/>
    <add verb="*" path="*.gif" type="ImageHandler.HttpImageHandler,ImageHandler"/>
    <add verb="*" path="*.png" type="ImageHandler.HttpImageHandler,ImageHandler"/>
</httpHandlers>

最后你需要创建处理程序

using System;
using System.Web;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

namespace ImageHandler{
    public class HttpImageHandler: IHttpHandler{
    int Width = 0;
    int Height = 0;

    public void ProcessRequest(System.Web.HttpContext context)
    {
      if(context.Request.Params["height"] != null){
        try{
           Height = int.Parse(context.Request.Params["height"]);
        }catch{
           Height = 0;
        }
      }

      if(context.Request.Params["width"] != null){
        try{
           Width = int.Parse(context.Request.Params["width"]);
        }catch{
           Width = 0;
        }
      }

      if (Width <= 0 && Height <=0)
      {               
        context.Response.Clear();
        context.Response.ContentType = 
        getContentType(context.Request.PhysicalPath);
        context.Response.WriteFile(context.Request.PhysicalPath);
        context.Response.End();
      }
      else 
      {
        context.Response.Clear();
        context.Response.ContentType = 
        getContentType(context.Request.PhysicalPath);
        byte[] buffer = 
        getResizedImage(context.Request.PhysicalPath,Width,Height);
        context.Response.OutputStream.Write
        (buffer, 0, buffer.Length);
        context.Response.End();
      }
    }

    public bool IsReusable{
        get{
            return false;
        }
    }

    byte[] getResizedImage(String path ,int width,int height)
    {
        Bitmap imgIn = new Bitmap(path);
        double y  = imgIn.Height;
        double x  = imgIn.Width;

        double factor = 1;
        if(width > 0){
            factor = width/x;
        }else if (height>0){
            factor = height/y;
        }
        System.IO.MemoryStream outStream = 
        new System.IO.MemoryStream();
        Bitmap imgOut = 
        new Bitmap((int)(x * factor),(int)(y * factor));
        Graphics g = Graphics.FromImage(imgOut);
        g.Clear(Color.White);
        g.DrawImage(imgIn,new Rectangle(0,0,(int)(factor * x),
        (int)(factor * y)),
        new Rectangle(0,0,(int)x,(int)y),GraphicsUnit.Pixel);

        imgOut.Save(outStream, getImageFormat(path));
        return outStream.ToArray();
    }  

    string getContentType(String path){
        switch (Path.GetExtension(path)) {
            case ".bmp": return "Image/bmp";
            case ".gif": return "Image/gif";
            case ".jpg": return "Image/jpeg";
            case ".png": return "Image/png";
            default :  break;
        }
        return "";
    }

    ImageFormat getImageFormat(String path){
        switch (Path.GetExtension(path)) {
            case ".bmp": return ImageFormat.Bmp;
            case ".gif": return ImageFormat.Gif;
            case ".jpg": return ImageFormat.Jpeg;
            case ".png": return ImageFormat.Png;
            default :  break;
        }
        return ImageFormat.Jpeg;
    }
    }
}

参考：ASP.NET 中图像的 HTTP 处理程序

其他示例： https ://www.c-sharpcorner.com/UploadFile/dacca2/working-with-image-in-httphandler/

http://www.wrox.com/WileyCDA/Section/Two-ASP-NET-HttpHandler-Image-Hacks.id-291916.html

jquery - 如何通过在请求中传递宽度参数来调整图像大小？

问题描述

解决方案

推荐阅读