Question

200分网页制作问题 ...图片怎么缩小显示.高手进...急.谢谢....

今天我看到一个网页,是专门下载图片的网页..这个网页上有很多小图片.点击之后,出现原图(也就是一个大图)..鼠标右击这个小图的链接地址.也就是这个大图的链接地址....呵呵..不知道这个大图是怎么缩小..在这个网页里以小图显示的...

问题1..这是用什么技术做的..DW我会基本的.我现在需要做出来..该怎么做???

问题2.我做出这个网页后.但是不想别人盗链我的图片(也就是知道这个图片的源地址..)..我该在网页里用什么技术..谢谢

请详细的回答些..我会基本的..但也不是非常精通DW...在这里先感谢了..
回答的两位兄弟..你们纯正浪费位置...请看青问题..再回答...

谢谢..三楼的回答..不过.我想第一个答案不是这个样子的.你说的.我明白.我说的是..其实这个图片没有进行处理,直接在这个网页里以小图..进行显示的..我查看他的链接..发现是大图..有没有一种技术,就是做好网页.大图可以自动缩小.在网页里显示....谢谢...另外那段代码有什么做用能简单解释下吗?.

Answer 1

楼主说的现在很多网站都在用哦----图片缩略法,好处是不会损害图片的质量.网页为了提高浏览速度很多都在用,是个相当重要的技术.
图片盗链的问题估计是没法解决的,很多做网站的都有"小偷程序",把别人的新闻,图片等下载下来作为己用.防图片盗用最好的方法就是在图片上加上水印效果,比如说在图上打上自己的网址等等,就是要让别人知道这个图是你网站上传出去的.
C#实现缩略图及水印:
using System;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
public class PictureMarker
{
/// <summary>
/// PictureMarker的构造函数
/// </summary>
public PictureMarker()
{
}

/// <summary>
/// PictureMarker的构造函数
/// </summary>
/// <param name="width">缩略图的宽度</param>
/// <param name="height">缩略图的高度</param>
/// <param name="ismust">是否一定要生成缩略图，推荐为false</param>
public PictureMarker(int width, int height, bool ismust)
{
this.width = width;
this.height = height;
this.ismust = ismust;
}

/// <summary>
/// PictureMarker的构造函数
/// </summary>
/// <param name="width">缩略图的宽度</param>
/// <param name="height">缩略图的高度</param>
/// <param name="ismust">是否一定要生成缩略图，推荐为false</param>
/// <param name="isSavePrimaryPic">是否要保存源图片</param>
/// <param name="primaryPicPath">源图片的保存目录</param>
public PictureMarker(int width, int height, bool ismust, bool isSavePrimaryPic, string primaryPicPath)
: this(width, height, ismust)
{
this.isSavePrimaryPic = isSavePrimaryPic;
this.primaryPicPath = primaryPicPath;
}

private int width;
private int height;
private bool ismust = false;
private bool isSavePrimaryPic = false;
private string primaryPicPath;

/// <summary>
/// 缩略图的宽度
/// </summary>
public int Width
{
get { return width; }
set { width = value; }
}

/// <summary>
/// 缩略图的高度
/// </summary>
public int Height
{
get { return height; }
set { height = value; }
}

/// <summary>
/// 是否一定要生成缩略图，推荐为false
/// </summary>
public bool IsMust
{
get { return ismust; }
set { ismust = value; }
}

/// <summary>
/// 是否要保存源图片
/// </summary>
public bool IsSavePrimaryPic
{
get { return isSavePrimaryPic; }
set { isSavePrimaryPic = value; }
}

/// <summary>
/// 源图片的保存目录
/// </summary>
public string PrimaryPicPath
{
get { return primaryPicPath; }
set { primaryPicPath = value; }
}

/// <summary>
/// 在图片上添加版权信息水印
/// </summary>
/// <param name="input">目标图片</param>
/// <param name="copyright">文字版权信息</param>
/// <param name="savepath">保存路径</param>
/// <param name="position">水印显示位置</param>
public void CreateMark(Stream input, string copyright, string savepath, WaterPosition position)
{
int xpoint, ypoint;
System.Drawing.Image photo = System.Drawing.Image.FromStream(input);
int pwidth = photo.Width;
int pheight = photo.Height;
Bitmap markpic = new Bitmap(photo);
markpic.SetResolution(photo.HorizontalResolution, photo.VerticalResolution);

Graphics graphics = Graphics.FromImage(markpic);

xpoint = (pwidth - 100) / 2;
ypoint = pheight - 40;
graphics.DrawString(copyright, new Font("楷体", 15), new System.Drawing.SolidBrush(Color.FromArgb(255, 0, 255, 255)),
new RectangleF(xpoint, ypoint, 400, 30));

try
{
markpic.Save(savepath);
}
finally
{
input.Close();
photo.Dispose();
markpic.Dispose();
graphics.Dispose();
}
}

/// <summary>
/// 在图片上添加版权信息水印
/// </summary>
/// <param name="input">目标图片</param>
/// <param name="copyright">图片版权信息</param>
/// <param name="savepath">保存路径</param>
/// <param name="position">水印显示位置</param>
public void CreateMark(Stream input, Stream copyright, string savepath, WaterPosition position)
{
int xpoint, ypoint;
System.Drawing.Image photo = System.Drawing.Image.FromStream(input);
System.Drawing.Image copy = System.Drawing.Image.FromStream(copyright);
int pwidth = photo.Width;
int pheight = photo.Height;
int cwidth = copy.Width;
int cheight = copy.Height;
if (pwidth - cwidth < 20 || pheight - cheight < 20)
{
input.Close();
copyright.Close();
photo.Dispose();
copy.Dispose();
throw new ArgumentException("不合适的图片尺寸.目标图片比版权图片至少宽20像素,高20像素.");
}

if (isSavePrimaryPic)
{
if (primaryPicPath == null || primaryPicPath == "")
{
input.Close();
copyright.Close();
photo.Dispose();
copy.Dispose();
throw new ArgumentException("当要求保存源图片时,源图片的保存路径不能为空");
}

try
{
photo.Save(primaryPicPath + "\\" + Path.GetFileName(savepath) + ".jpg", ImageFormat.Jpeg);
}
catch (Exception ex)
{
input.Close();
copyright.Close();
photo.Dispose();
copy.Dispose();

throw ex;
}
}

Bitmap markpic = new Bitmap(photo);
markpic.SetResolution(photo.HorizontalResolution, photo.VerticalResolution);

Graphics graphics = Graphics.FromImage(markpic);
System.Drawing.Imaging.ImageAttributes att = new System.Drawing.Imaging.ImageAttributes();

float[][] matrixelements = {

new float[] {1.0f, 0.0f, 0.0f, 0.0f, 0.0f},

new float[] {0.0f, 1.0f, 0.0f, 0.0f, 0.0f},

new float[] {0.0f, 0.0f, 1.0f, 0.0f, 0.0f},

new float[] {0.0f, 0.0f, 0.0f, 0.5f, 0.0f},

new float[] {0.0f, 0.0f, 0.0f, 0.0f, 1.0f}};

System.Drawing.Imaging.ColorMatrix matrix = new System.Drawing.Imaging.ColorMatrix(matrixelements);

att.SetColorMatrix(matrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);

switch (position)
{
case WaterPosition.Left:
xpoint = 10;
ypoint = (pheight - cheight) / 2;
break;
case WaterPosition.LeftUp:
xpoint = 10;
ypoint = 10;
break;
case WaterPosition.MiddleUp:
xpoint = (pwidth - cwidth) / 2;
ypoint = 10;
break;
case WaterPosition.RightUp:
xpoint = pwidth - cwidth - 10;
ypoint = 10;
break;
case WaterPosition.Right:
xpoint = pwidth - cwidth - 10;
ypoint = (pheight - cheight) / 2;
break;
case WaterPosition.RightDown:
xpoint = pwidth - cwidth - 10;
ypoint = pheight - cheight - 10;
break;
case WaterPosition.MiddleDown:
xpoint = (pwidth - cwidth) / 2;
ypoint = pheight - cheight - 10;
break;
case WaterPosition.LeftDown:
xpoint = 10;
ypoint = pheight - cheight - 10;
break;
default:
xpoint = (pwidth - cwidth) / 2;
ypoint = (pheight - cheight) / 2;
break;
};

graphics.DrawImage(copy, new Rectangle(xpoint, ypoint, cwidth, cheight), 0, 0, cwidth, cheight, GraphicsUnit.Pixel, att);

if (width != 0 && height != 0)
{
if (ismust)
{
int twidth, theight;
if (markpic.Width * height > markpic.Height * width)
{
twidth = width;
theight = markpic.Height * width / markpic.Width;
}
else
{
theight = height;
twidth = markpic.Width * height / markpic.Height;
}

markpic.SetResolution(twidth, theight);
markpic = (Bitmap)markpic.GetThumbnailImage(twidth, theight, null, new IntPtr());
}
else
{
if (width < markpic.Width || height < markpic.Height)
{
if (width < markpic.Width || height < markpic.Height)
{
int twidth, theight;
if (markpic.Width * height > markpic.Height * width)
{
twidth = width;
theight = markpic.Height * width / markpic.Width;
}
else
{
theight = height;
twidth = markpic.Width * height / markpic.Height;
}

markpic.SetResolution(twidth, theight);
markpic = (Bitmap)markpic.GetThumbnailImage(twidth, theight, null, new IntPtr());
}
}
}
}

try
{
markpic.Save(savepath, ImageFormat.Jpeg);
}
finally
{
graphics.Dispose();
input.Close();
copyright.Close();
photo.Dispose();
copy.Dispose();
markpic.Dispose();
}
}

/// <summary>
/// 在图片上添加版权信息水印
/// </summary>
/// <param name="input">目标图片</param>
/// <param name="copyright">版权信息,可以为图片路径或文字版权信息</param>
/// <param name="directory">保存目录</param>
/// <param name="filename">保存文件名</param>
/// <param name="isDrectory">copyright是否为文件路径</param>
/// <param name="position">水印显示位置</param>
public void CreateMark(Stream input, string copyright, string directory, string filename, bool isDrectory, WaterPosition position)
{
if (isDrectory)
{
FileStream _copyright = new FileStream(copyright, FileMode.Open, FileAccess.Read, FileShare.Read);
CreateMark(input, _copyright, directory, filename, position);
}
else
{
CreateMark(input, copyright, directory + "\\" + filename, position);
}
}

/// <summary>
/// 在图片上添加版权信息水印
/// </summary>
/// <param name="input">目标图片</param>
/// <param name="copyright">图片版权信息</param>
/// <param name="directory">保存目录</param>
/// <param name="filename">保存文件名</param>
/// <param name="position">水印显示位置</param>
public void CreateMark(Stream input, Stream copyright, string directory, string filename, WaterPosition position)
{
CreateMark(input, copyright, directory + "\\" + filename, position);
}

/// <summary>
/// 在图片上添加版权信息水印
/// </summary>
/// <param name="filepath">目标图片路径</param>
/// <param name="copyright">版权信息,可以为图片路径或文字版权信息</param>
/// <param name="directory">保存目录</param>
/// <param name="filename">保存文件名</param>
/// <param name="isDrectory">copyright是否为文件路径</param>
/// <param name="position">水印显示位置</param>
public void CreateMark(string filepath, string copyright, string directory, string filename, bool isDrectory, WaterPosition position)
{
FileStream input = new FileStream(filepath, FileMode.Open, FileAccess.ReadWrite, FileShare.Read);
CreateMark(input, copyright, directory, filename, isDrectory, position);
}

/// <summary>
/// 在图片上添加版权信息水印
/// </summary>
/// <param name="filepath">目标图片路径</param>
/// <param name="copyright">版权信息,可以为图片路径或文字版权信息</param>
/// <param name="savepath">保存路径</param>
/// <param name="isDrectory">copyright是否为文件路径</param>
/// <param name="position">水印显示位置</param>
public void CreateMark(string filepath, string copyright, string savepath, bool isDrectory, WaterPosition position)
{
if (isDrectory)
{
FileStream input = new FileStream(filepath, FileMode.Open, FileAccess.ReadWrite, FileShare.Read);
FileStream _copyright = new FileStream(copyright, FileMode.Open, FileAccess.Read, FileShare.Read);
CreateMark(input, _copyright, savepath, position);
}
else
{
FileStream input = new FileStream(filepath, FileMode.Open, FileAccess.ReadWrite, FileShare.Read);
CreateMark(input, copyright, savepath, position);
}
}

public void CreateThumbnailImage(Stream input, string savepath)
{
if (width == 0 || height == 0)
{
input.Close();
throw new ArgumentException("缩略图的宽度和高度不能为0.");
}
Image photo = Image.FromStream(input);

if (isSavePrimaryPic)
{
if (primaryPicPath == null || primaryPicPath == "")
{
input.Close();
photo.Dispose();
throw new ArgumentException("当要求保存源图片时,源图片的保存路径不能为空");
}

try
{
photo.Save(Path.Combine(primaryPicPath, Path.GetFileNameWithoutExtension(savepath) + ".jpg"), ImageFormat.Jpeg);
}
catch (Exception ex)
{
input.Close();
photo.Dispose();

throw ex;
}
}

Bitmap markpic = new Bitmap(photo);

if (ismust)
{
int twidth, theight;
if (markpic.Width * height > markpic.Height * width)
{
twidth = width;
theight = markpic.Height * width / markpic.Width;
}
else
{
theight = height;
twidth = markpic.Width * height / markpic.Height;
}

markpic.SetResolution(twidth, theight);
markpic = (Bitmap)markpic.GetThumbnailImage(twidth, theight, null, new IntPtr());
}
else
{
if (width < markpic.Width || height < markpic.Height)
{
if (width < markpic.Width || height < markpic.Height)
{
int twidth, theight;
if (markpic.Width * height > markpic.Height * width)
{
twidth = width;
theight = markpic.Height * width / markpic.Width;
}
else
{
theight = height;
twidth = markpic.Width * height / markpic.Height;
}

markpic.SetResolution(twidth, theight);
markpic = (Bitmap)markpic.GetThumbnailImage(twidth, theight, null, new IntPtr());
}
}
}

try
{
markpic.Save(savepath, ImageFormat.Jpeg);
}
finally
{
input.Close();
photo.Dispose();
markpic.Dispose();
}
}

public void CreateThumbnailImage(string source, string savepath)
{
FileStream input = new FileStream(source, FileMode.Open, FileAccess.ReadWrite, FileShare.Read);
CreateThumbnailImage(input, savepath);
}

/// <summary>
/// 水印显示的位置
/// </summary>
public enum WaterPosition
{
/// <summary>
/// 左上
/// </summary>
LeftUp,
/// <summary>
/// 中上
/// </summary>
MiddleUp,
/// <summary>
/// 右上
/// </summary>
RightUp,
/// <summary>
/// 右
/// </summary>
Right,
/// <summary>
/// 右下
/// </summary>
RightDown,
/// <summary>
/// 中下
/// </summary>
MiddleDown,
/// <summary>
/// 左下
/// </summary>
LeftDown,
/// <summary>
/// 左
/// </summary>
Left,
/// <summary>
/// 正中间
/// </summary>
Middle
}
}

Answer 2

我是外行，但是想发表一下意见并学习~~
首先，在网上很多图片都可以实现这种效果，看上去都是统一尺寸，但是一点就跳转到规格完全不同的原图，比如百度~
有2种猜想，一种是为了节省空间而开发出来的缩放预览功能，这是很早以前的技术（估计电脑有了画图程序的时候就开发了这技术），举例，随便找个大图，点“图片另存为”，存到本地后打开文件夹，看到的就是小图
还有一种就是js代码调用，无论什么尺寸的图片都让其在加入含有该代码的页面内显示出指定的大小（就是所谓的自适应框架缩小），这种代码在百度上搜索满天飞（不是说种类多，是说提及该代码的文章很多），我就不复制了
然后是防止盗链的办法，其实我个人感觉图片以及可以全文显示的文章防盗链（其实不仅是盗链，我觉得大概是不想别人在其他地方使用只属于你的东西）意义不大，比如你不给我截图，我可以反截图，你不给我下载，大多数时候用工具提取/自己反编译都能下载到，你不给我原文件地址，我查看源代码，我反编译，一般有70%可以找到地址（以上情况大型教育/资源站点，内网站点，高保密站点不算，技术站点更不算）
不过，要防止像我一样的大部分没有多少水平的网民盗链图片是有好办法：
原理是：http标准协议中有专门的字段记录referer ，无加密的协议根据该字段记录可以追踪到原文件地址（入站点/包含文件的外链网页），通俗来说就是储存目标资料的虚拟主机资料库，然后大摇大摆走进去把你的东西扛走~~，防盗措施有3种思路：
1--把暴露资料库地址的信息隐藏起来，在信息前加个大门
使用apache文件FileMatch限制，在httpd.conf中增加 ( 其实也可以将把下面的语句存成一个.htaccess文件)，并放到你的网站的根目录（www/html目录）
SetEnvIfNoCase Referer "^你的网址/" local_ref=1

Order Allow,Deny
Allow from env=local_ref
Allow from 127.0.0.1
2--在别人去你资料库的路上增加一条通往其他地方的路径，并且加一围墙在正确的路上，让准备去盗的人自动改道~~
使用rewrite,需要增加apache的mode_rewrite，支持.htaccess文件目录权限限制 ；
在虚拟主机根目录增加.htaccess文件，描述从定向，把非本地地址refer的图片文件都重定向到警告图片或者警告网页上（必须确认你的服务器解译引擎为Apache2，并支持htaccess客户设置文件）--具体操作，因为重定向是个很困扰外行的问题，我晕，去搜索就有了
3--把资料库搬到孤岛上，水下全是怪兽，然后只给你们内部的人船
禁止apache直接访问资源文件，规定php通过文件进行读取

在读取资源文件输出之前，插入以下判断代码
引用（这里直接查看引用中是否包含host地址）

$referer = $_SERVER['HTTP_REFERER'];
$selfurl = $_SERVER['HTTP_HOST'];
if(false == strpos($referer,$selfurl))
{
echo '非法盗链!';
exit(1);
}

Answer 3

不知道就不要乱引用,其实楼上的几位对Dreamweaver和网页三剑客并不很了解呀.
如果你计算机上装了dreamweaver和fireworks就很好解决第一个问题了.
第一步:将要用的图片放在一个文件夹中,
第二步:打开dreamweaver,命令菜单-创建网站相册.
第三步:在源图像文件夹中输入你放图片的那个文件夹的位置.
目标文件夹输入你要放网页的文件夹的位置.
点下确定,不就做好了.
要改的话就看你自己的本领了.

第二个问题,如果是静态页很难解决.是动态页就简单了.
其实没有必要的,因为是图片吗,别人下载的方法太多了,这里就不写了,免得你头晕.

其实我很懒,也很差.呵呵,祝你好运.

Answer 4

1、静态来做，就是你做一张小的，点了之后再做一张大的。不过这样太烦了。
2、用动太来做，这样方便的多，你可以都用同一张图片，在第一个页面放上图片，把大小设置小一点。连接的那个页面2再放上一个图片，大小可以是原来的。也可以设置相对于第1个页面大一点就可以了。
具体的操作方法我可以给你做一个视频教程。要的话就和我联系一下。联系方式在资料里。

Answer 5

你好！
你所说的小图点击之后出现大图，是这样的：
1：利用Photoshop将原图缩小，放到你看到的这个网页上，小图上做原图的链接。
2：将每一个大图（也就是原图）都用一个页面显示，就是说这个页面就现实这一张图片。

第二个问题：防止盗链。
放在 <body>中

<body leftmargin="2" topmargin="0" marginwidth="0" marginheight="0"

oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()">