`
javatar
  • 浏览: 1699678 次
  • 性别: Icon_minigender_1
  • 来自: 杭州699号
社区版块
存档分类
最新评论

预览图生成策略

阅读更多
有一段时间内存老涨,跟踪到图片上传可能有问题
测了一下:

LoadRunner场景:
每10秒加16个VUser
VUser总量800
分4台PC代理执行
全部robot相册表单上传图片一个功能点

分步压力测试:
1.使用现有程序
20多分钟后大概上传了5000多张1024*768的桌面图片后,
jprofiler显示内存堆占据极大,主要是byte类占据
top一下,发现java进程占了1.9G内存,而且还在涨。
负载也很高:load average: 24.18, 0.15, 0.09

2.将上传图片功能完全注释掉,只剩下空壳
半个小时后,内存保持在600M-800M
负载正常:load average: 0.07, 0.04, 0.15
正常
如此看来上传图片功能是有问题。

3.将上传图片功能留下,把其后的生成预览图注释掉。
半个小时后,内存保持在800M-900M
正常
如此看来commons-upload没问题(否则就要试一下改用cos等上传组件),
可能是生成预览图有问题

检查生成预览图程序,是直接用J2D的Graphic2D将图画出来,用iio保存的

优化:
将预览图程序重构为策略模式。
将所有可能方案作为策略实现,一个个试。
通过查资料,
找到:awt,j2d,jai,iio,jmagick,imagej,imagemanip等方案。

package com.sanook.hompy.util.image.preview;

import java.awt.Dimension;
import java.io.File;
import java.io.IOException;

import org.apache.commons.io.FileUtils;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

/**
 * 
 * 此类负责与调用者打交道
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */
public class PreivewManager {
	
	protected static final Log log = LogFactory.getLog(PreivewManager.class);
	
	private PreviewGenerator previewGenerator;
	
	public PreivewManager(PreviewGenerator previewGenerator) {
		this.previewGenerator = previewGenerator;
	}
	
	/**
	 * 一些通用的处理就在这先做了
	 * 
	 * @param source
	 * @param target
	 * @param width
	 * @param height
	 * @throws IOException
	 */
	public void generatePreview(String source, String target, int width, int height) throws IOException {
		if (source == null || ! new File(source).exists()) {
			return;
		}
		checkDir(target);
		
		Dimension d = previewGenerator.getSize(source);
		int w = (int)d.getWidth();
		int h = (int)d.getHeight();
		if (w <= width && h <= height) {
			copy(source, target); //如果图片较小,就直接copy过去
		} else {
			//同比缩放
			if (w > width || h > height) {
				if(w * height > h * width){
					height = h * width / w;
				}else{
					width = w * height / h;
				}
			} else {
				width = w;
				height = h;
			}
			previewGenerator.generate(source, target, width, height);
		}
		return ;
	}
	
	private void checkDir(String target) {
		File dir = new File(target).getParentFile();
		if (! dir.exists()) {
			dir.mkdirs();
			log.warn(dir.getAbsolutePath() + " not exists! already auto made!");
		}
	}
	
	private void copy(String source, String target) throws IOException {
		FileUtils.copyFile(new File(source), new File(target));
	}
}


package com.sanook.hompy.util.image.preview;

import java.awt.Dimension;
import java.io.IOException;

/**
 * 
 * 预览图生成的策略接口
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */

public interface PreviewGenerator {
	
	/**
	 * 主要用于判断是否为大图,小图就copy
	 * @param source 源图片位置
	 * @return Dimension 图片的大小
	 * @throws IOException
	 */
	public Dimension getSize(String source) throws IOException;
	
	/**
	 * 处理生成预览图的策略方法
	 * 大小判定,比例调整已在PreivewManager,请直接使用width,height
	 * @param source 源图片位置
	 * @param target 保存预览图位置
	 * @param width 预览图宽度
	 * @param height 预览图高度
	 * @throws IOException
	 */
	public void generate(String source, String target, int width, int height) throws IOException;
	
}


package com.sanook.hompy.util.image.preview;

import java.awt.image.BufferedImage;
import java.io.IOException;

/**
 * 
 * BufferedImage 的读写处理策略接口
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */
public interface ImageProvider {
	
	public BufferedImage readImage(String source) throws IOException;
	
	public void saveImage(BufferedImage image, String target) throws IOException;

}


package com.sanook.hompy.util.image.preview;

import java.awt.image.BufferedImage;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageDecoder;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

/**
 * 
 * Sun的非标准JPEG处理类,没ImageIO之前,全靠它撑着
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */

public class CodecImageProvider implements ImageProvider {

	public BufferedImage readImage(String source) throws IOException {
		BufferedInputStream bis = null;
		try {
			bis = new BufferedInputStream(new FileInputStream(source));
			JPEGImageDecoder decoder = JPEGCodec.createJPEGDecoder(bis);
			return decoder.decodeAsBufferedImage();
		} finally {
			if (bis != null) {
				bis.close();
			}
		}
	}

	public void saveImage(BufferedImage image, String target) throws IOException {
		BufferedOutputStream bos = null;
		try {
			bos = new BufferedOutputStream(new FileOutputStream(target));
			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(bos);
			encoder.encode(image);
		} finally {
			if (bos != null) {
				bos.close();
			}
		}
	}

}


package com.sanook.hompy.util.image.preview;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;

import javax.imageio.IIOImage;
import javax.imageio.ImageIO;
import javax.imageio.ImageTypeSpecifier;
import javax.imageio.ImageWriteParam;
import javax.imageio.ImageWriter;
import javax.imageio.stream.ImageOutputStream;

/**
 * 
 * 标准的Java实现图形处理包,处理性能待考量
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */

public class IioImageProvider implements ImageProvider {

	public BufferedImage readImage(String source) throws IOException {
		return ImageIO.read(new File(source));
	}

	public void saveImage(BufferedImage image, String target) throws IOException {
		File targetFile = new File(target);
		ImageWriter writer = null;
		ImageOutputStream outputStream = null;
		try {
			ImageTypeSpecifier type = ImageTypeSpecifier
					.createFromRenderedImage(image);
			Iterator iterator = ImageIO.getImageWriters(type, "JPEG");
			if (!iterator.hasNext()) {
				return;
			}
			writer = (ImageWriter) iterator.next();
			IIOImage iioImage = new IIOImage(image, null, null);
			ImageWriteParam param = writer.getDefaultWriteParam();
			param.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);
			param.setCompressionQuality(1.0f);
			outputStream = ImageIO.createImageOutputStream(targetFile);
			writer.setOutput(outputStream);
			writer.write(null, iioImage, param);
		} finally {
			if (outputStream != null) {
				outputStream.close();
			}
			if (writer != null) {
				writer.abort();
			}
		}
	}

}


package com.sanook.hompy.util.image.preview;

import java.awt.Dimension;
import java.awt.Image;
import java.awt.Toolkit;
import java.io.IOException;

/**
 * 
 * 最原始的方法,Toolkit一般用于桌面加载图片,调用的地方到处是ImageObserver
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */
public class AwtPreviewGenerator implements PreviewGenerator {

	public Dimension getSize(String source) throws IOException {
		Image image = Toolkit.getDefaultToolkit().getImage(source);
		return new Dimension(image.getWidth(null), image.getHeight(null));
	}

	public void generate(String source, String target, int width, int height)
			throws IOException {
		Image image = Toolkit.getDefaultToolkit().getImage(source);
		image = image.getScaledInstance(width, height, Image.SCALE_FAST);
		// TODO Image保存方式待定
		// imageProvider.saveImage((BufferedImage)image, target);
	}

}


package com.sanook.hompy.util.image.preview;

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.IOException;

/**
 * 
 * 这个是自己操大刀,用Graphics直接画出来,再保存
 * 
 * 注:重构前,就此类+IioImageProvider的实现方式
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */

public class J2dPreviewGenerator implements PreviewGenerator {
	
	private ImageProvider imageProvider;
	
	public J2dPreviewGenerator(ImageProvider imageProvider) {
		this.imageProvider = imageProvider;
	}

	public Dimension getSize(String source) throws IOException {
		BufferedImage image = imageProvider.readImage(source);
		return new Dimension(image.getWidth(), image.getHeight());
	}

	public void generate(String source, String target, int width, int height) throws IOException {
		BufferedImage sourceImage = imageProvider.readImage(source);
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics2D g = null;
		try {
			g = (Graphics2D) image.createGraphics();
			g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
			g.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
			// TODO hints待调整 ...
			g.setColor(Color.white);
			g.fillRect(0, 0, width, height);
			g.drawImage(sourceImage, 0, 0, width, height, null);
		} finally {
			if (g != null) {
				g.dispose();
			}
		}
		imageProvider.saveImage(image, target);
	}

}


package com.sanook.hompy.util.image.preview;

import java.awt.Dimension;
import java.awt.RenderingHints;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.io.IOException;

/**
 * 
 * 标准的Image处理的装饰器模式实现,感觉比直接操Graphic好些
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */

public class OpPreviewGenerator implements PreviewGenerator {
	
	private ImageProvider imageProvider;
	
	public OpPreviewGenerator(ImageProvider imageProvider) {
		this.imageProvider = imageProvider;
	}

	public Dimension getSize(String source) throws IOException {
		BufferedImage image = imageProvider.readImage(source);
		return new Dimension(image.getWidth(), image.getHeight());
	}

	public void generate(String source, String target, int width, int height) throws IOException {
		BufferedImage sourceImage = imageProvider.readImage(source);
		AffineTransform affineTransform = new AffineTransform();
		affineTransform.scale(width, height);
		RenderingHints hints = new RenderingHints(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_DEFAULT);
		// TODO hints待调整 ...
		AffineTransformOp affineTransformOp = new AffineTransformOp(affineTransform, hints);
		BufferedImage image = new BufferedImage(width, height, sourceImage.getType());
		image = affineTransformOp.filter(sourceImage, image);
		imageProvider.saveImage(image, target);
	}

}


package com.sanook.hompy.util.image.preview;

import java.awt.Dimension;
import java.awt.image.renderable.ParameterBlock;
import java.awt.image.renderable.RenderableImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.media.jai.JAI;
import javax.media.jai.ParameterBlockJAI;
import javax.media.jai.PlanarImage;

import com.sun.media.jai.codec.ImageCodec;
import com.sun.media.jai.codec.ImageEncoder;
import com.sun.media.jai.codec.JPEGEncodeParam;

/**
 * 
 * ImageIO的前身,但保持独立发展,比ImageIO绑定JDK,更新速度快多了
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */

public class JaiPreviewGenerator implements PreviewGenerator {

	public Dimension getSize(String source) throws IOException {
		ParameterBlockJAI loadPB = new ParameterBlockJAI("fileload");
		loadPB.setParameter("filename", source);
		PlanarImage image = JAI.create("fileload", loadPB);
		return new Dimension(image.getWidth(), image.getHeight());
	}

	public void generate(String source, String target, int width, int height) throws IOException {
		ParameterBlock pb = new ParameterBlock();
		pb.addSource(source);
		RenderableImage render = JAI.createRenderable("renderable", pb);
		PlanarImage image = (PlanarImage) render.createScaledRendering(width, height, null);
		save(image, target);
	}
	
	private void save(PlanarImage image, String target) throws IOException {
		File targetFile = new File(target);
		FileOutputStream out = null;
		try {
			JPEGEncodeParam param = new JPEGEncodeParam();
			param.setQuality(1.00f);
			out = new FileOutputStream(targetFile);
			ImageEncoder encoder = ImageCodec.createImageEncoder("JPEG", out, param);
			encoder.encode(image);
		} finally {
			if (out != null) {
				out.close();
			}
		}
	}

}


package com.sanook.hompy.util.image.preview;

import java.awt.Dimension;
import java.io.IOException;

import magick.CompressionType;
import magick.ImageInfo;
import magick.MagickApiException;
import magick.MagickException;
import magick.MagickImage;

/**
 * 
 * Unix下最著名的ImageMagicK库的Java调用
 * JMagicK并不处理什么,只是ImageMagicK到Java的一个jni接口,其方法大部分是native的
 * 
 * 注:已放在正式环境下run了
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */

public class JmagickPreviewGenerator implements PreviewGenerator {
	
	public JmagickPreviewGenerator() {
		System.setProperty("jmagick.systemclassloader", "no");
	}

	public Dimension getSize(String source) throws IOException {
		try {
			ImageInfo info = new ImageInfo(source);
			MagickImage image = new MagickImage(info);
			return image.getDimension();
		} catch (MagickApiException ex) {
			throw new IOException(ex.getMessage());
		} catch (MagickException ex) {
			throw new IOException(ex.getMessage());
		}
	}

	public void generate(String source, String target, int width, int height) throws IOException {
		try {
			ImageInfo info = new ImageInfo(source);
			MagickImage image = new MagickImage(info);
			MagickImage canvasImage = image.scaleImage(width, height);
			save(canvasImage, target);
		} catch (MagickApiException ex) {
			ex.printStackTrace();
			throw new IOException(ex.getMessage());
		} catch (MagickException ex) {
			ex.printStackTrace();
			throw new IOException(ex.getMessage());
		}
	}
	
	private void save(MagickImage image, String target) throws IOException {
		try {
			image.setCompression(CompressionType.JPEGCompression);
			image.setFileName(target);
			image.writeImage(new ImageInfo());
		} catch (MagickApiException ex) {
			ex.printStackTrace();
			throw new IOException(ex.getMessage());
		} catch (MagickException ex) {
			ex.printStackTrace();
			throw new IOException(ex.getMessage());
		}
	}

}


package com.sanook.hompy.util.image.preview;

import java.awt.Dimension;
import java.io.IOException;

/**
 * 在生物方面用的较多,如细胞透视图等的处理
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */
public class ImagejPreviewGenerator implements PreviewGenerator {

	public Dimension getSize(String source) throws IOException {
		// TODO 没写完
		return null;
	}

	public void generate(String source, String target, int width, int height) throws IOException {
		// TODO 没写完
		
	}

}


结果:
用Op比直接用Graphic要好些,
JMagicK的内存占有会低很多,
速度也比iio快3到5倍。
但负载还是偏高。

资源:
ImageMagicK: http://www.imagemagick.org/ (提供C/C++原生接口)
JMagicK: http://www.yeo.id.au/jmagick/  (Java接口)
RMagicK: http://rmagick.rubyforge.org/ (Ruby接口)
也支持其它语言:
LISP: http://common-lisp.net/project/cl-magick/
PASCAL: http://wiki.lazarus.freepascal.org/index.html/PascalMagick
PHP: http://www.magickwand.org/download/php/
PYTHON: http://www.imagemagick.org/download/python/
TCL: http://tclmagick.sourceforge.net/

BTW:
ImageMagicK和JMagicK安装很麻烦哦,最好都用源代码包编译安装,rpm包安装常出错。
  • src.rar (8.5 KB)
  • 描述: 源代码包
  • 下载次数: 559
  • lib.rar (3 MB)
  • 描述: 程序依赖包
  • 下载次数: 1311
分享到:
评论
6 楼 danStart 2016-09-06  
大神,我想问问怎么校验图片安全,一起怎么判断文件的真实格式?谢谢
5 楼 yangzhihuan 2007-04-05  
我在遇到了使用ImageIO.read(InputSteram in)方法时,JVM狂吃内存的情况,使用JProdfile看的时候是byte[]狂占内存,而且还是用完了之后不释放,请问题楼主这个问题能否解决?到底是不是ImageIO本身的问题呢?
4 楼 galaxystar 2007-01-09  
jmagic不错!
3 楼 javatar 2007-01-09  
上次ttitfly发站内消息问我怎么生成gif动画的缩略图,
发上来,作为这个帖的补充。
依赖附件lib.rar中的fmsware-gif.jar
package com.sanook.hompy.util.image.preview;

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.IOException;

import com.fmsware.gif.AnimatedGifEncoder;
import com.fmsware.gif.GifDecoder;

/**
 * 
 * GIF动画的缩略实现策略
 * 
 * @see PreviewGenerator
 * 
 * @author 梁飞 liangfei0201@163.com
 *
 */
public class GifPreviewGenerator implements PreviewGenerator {
	
	private PreviewGenerator nonGifPreviewGenerator;
	
	public GifPreviewGenerator(PreviewGenerator nonGifPreviewGenerator) {
		this.nonGifPreviewGenerator = nonGifPreviewGenerator;
	}

	public Dimension getSize(String source) throws IOException {
		if (! isGif(source)) {
			return nonGifPreviewGenerator.getSize(source);
		}
		GifDecoder decoder = new GifDecoder();
		int status = decoder.read(source);
		if (status != GifDecoder.STATUS_OK) {
			throw new IOException("read image " + source + " error!");
		}
		
		return decoder.getFrameSize();
	}

	public void generate(String source, String target, int width, int height) throws IOException {
		if (! isGif(source)) {
			nonGifPreviewGenerator.generate(source, target, width, height);
			return ;
		}
		GifDecoder decoder = new GifDecoder();
		int status = decoder.read(source);
		if (status != GifDecoder.STATUS_OK) {
			throw new IOException("read image " + source + " error!");
		}
		
		AnimatedGifEncoder encoder = new AnimatedGifEncoder();
		encoder.start(target);
		encoder.setRepeat(decoder.getLoopCount());
		for (int i = 0; i < decoder.getFrameCount(); i ++) {
			encoder.setDelay(decoder.getDelay(i));
			encoder.addFrame(scale(decoder.getFrame(i), width, height));
		}
		encoder.finish();
	}
	
	// TODO GIF的格式待改为ContentType元数据判定
	private boolean isGif(String source) {
		if (source == null || source.length() < 4) {
			return false;
		}
		return ".gif".equalsIgnoreCase(source.substring(source.length() - 4));
	}
	
	// TODO BufferedImage的缩略,多个PreviewGenerator重复,待重构
	private BufferedImage scale(BufferedImage sourceImage, int width, int height) {
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics2D g = null;
		try {
			g = image.createGraphics();
			g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
			g.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
			// TODO Hint待调整
			g.setColor(Color.white);
			g.fillRect(0, 0, width, height);
			g.drawImage(sourceImage, 0, 0, width, height, null);
		} finally {
			if (g != null) {
				g.dispose();
			}
		}
		return image;
	}

}

2 楼 javatar 2006-12-30  
不知各位高人用什么处理图片,可否贡献出来参考下。
1 楼 javatar 2006-12-30  
有些未写完,待补充。

相关推荐

    html5图片上传本地生成缩略图预览

    在图片预览和缩略图生成中,我们可以利用Canvas的drawImage方法将图片加载到Canvas上,然后通过调整Canvas的宽度和高度来生成缩略图。 3. **Data URL**:Data URL是一种内联资源表示方式,可以直接在页面中嵌入图像...

    C#实现图片个性化预览

    7. **性能优化**:在处理大量图片时,可能需要考虑缓存策略,例如将生成的缩略图保存到内存或磁盘,避免每次预览都重新生成。 8. **异常处理**:为了程序的健壮性,需要捕获可能出现的异常,比如文件不存在、权限...

    html5移动端图片上传本地生成缩略图预览(单图上传)

    预览图片后,我们可能还需要生成缩略图,以减小数据传输量或适应不同的展示尺寸。这里我们可以利用HTML5的Canvas元素。 1. 创建一个canvas元素,并获取其2D渲染上下文。 ```javascript var canvas = document....

    缩略图生成sample代码

    缓存策略可以用来减少重复工作,例如,当同一文件的缩略图已经生成过,可以存储在内存中以供后续使用。此外,还可以根据文件大小或复杂性来调整缩略图的生成质量,以平衡性能和视觉效果。 6. **错误处理和调试**: ...

    图形预览-图片自动预览程序

    在计算机系统中,图形预览是指在不打开文件的情况下,通过缩略图或小窗口显示文件内容的一种功能。这通常涉及到图像处理算法,如缩放、色彩管理和格式转换。为了实现这一功能,开发人员需要编写代码来读取不同类型的...

    .Net图片上传预览

    综上所述,实现.NET图片上传预览功能涉及前端图片的Base64编码预览、后端的文件接收和验证、异步处理、错误处理以及安全策略等多个方面。理解并熟练掌握这些知识点,能够帮助开发者构建稳定、安全且用户体验良好的...

    移动页面预览图片并生成截图示例

    在移动应用开发中,"移动页面预览图片并生成截图示例"是一个常见的需求,尤其在社交媒体、在线购物和图像编辑应用中。这个过程通常涉及以下几个关键知识点: 1. **图片选择**: 用户需要从本地设备选取图片,这可以...

    java 生成网页图片Web源代码

    9. **缓存策略**:为了提高性能,可以考虑在服务器端缓存生成的图片,避免重复计算。这可能涉及到使用内存缓存(如Guava Cache)或文件系统缓存。 10. **安全考虑**:当处理用户数据生成图片时,需要防止跨站脚本...

    截图缩略图生成源码2012417

    【截图缩略图生成源码2012417】是一个编程代码资源,主要功能是处理用户上传的图片,进行裁剪并生成缩略图,最终保存到本地供用户下载。这个源码适用于需要在网站或应用中实现快速、自动化生成图片缩略图的场景,...

    PoolImage 比赛showcase谱面预览生成器 (图片).zip

    PoolImage 比赛showcase谱面预览生成器是一个专为音乐节奏游戏设计的工具,主要用于生成比赛展示用的谱面预览图片。这个工具的源代码是比赛项目的一部分,旨在帮助参赛者或者赛事组织者高效、统一地制作高质量的谱面...

    【Unity地图生成插件】Map Graph 灵活的地图生成工具,快速生成各种类型的程序化地图

    文件名:Map Graph v1.25.unitypackage Map Graph 是一款为 Unity 开发的强大地图生成插件,...地形与地貌生成:支持复杂的地形生成,开发者可以通过高度图、噪声算法等生成逼真的自然环境,如山脉、河流、平原等。

    多文件预览上传-多图片预览上传

    - 文件命名策略和冲突处理是关键,通常通过生成唯一ID或使用时间戳避免重名问题。 4. **安全性考虑**: - 需要限制文件类型,防止恶意用户上传不安全或大体积的文件,可以通过检查文件扩展名或者MIME类型实现。 ...

    input file上传图片预览

    由于浏览器的安全策略,不能直接使用File对象的URL,所以我们需要创建一个`FileReader`来读取文件内容并生成一个可安全使用的URL。 ```javascript const reader = new FileReader(); reader.onload = function...

    图片生成缩略图片

    7. **性能优化**:为了提升服务响应速度,可以采用缓存策略,将生成的缩略图存储起来,下次请求相同图片时直接返回。还可以利用CDN(内容分发网络)加速图片的传输。 8. **响应式设计**:在移动设备上,缩略图的...

    jQuery带删除功能多图片上传预览插件

    2. **读取文件**:使用`FileReader` API逐个读取选中的图片文件,生成预览图。 3. **创建预览元素**:为每张图片创建一个包含预览图和删除按钮的DOM元素,并添加到预览容器中。 4. **删除操作**:为删除按钮绑定点击...

    asp.net图片预览

    1. 图片缩略图:如果需要生成缩略图,可以将用户上传的图片发送到ASP.NET服务器,使用GDI+或第三方库如ImageMagick生成缩略图,然后返回Base64编码的缩略图数据。 2. 图片质量控制:服务器端可以调整图片的质量和...

    上传图片并预览Demo

    此外,为了提供更好的用户体验,可以将图片转换为预览尺寸,如生成缩略图,这可以通过JavaScript库如`canvas`或`sharp`(Node.js环境)来实现。 2. **实时预览**:使用`FileReader`的`readAsDataURL()`方法,可以将...

    根据文件模板实现预览、生成word、pdf、excel(后端-项目)

    例如,工厂模式可用于创建文件处理对象,根据文件类型动态选择合适的生成或预览策略。单例模式可以用于确保文件服务类在整个应用中只有一个实例,避免资源浪费。观察者模式则可以用于文件变化监听,当模板文件更新时...

    公司联系方式地图生成器公司地址地图生成

    3. "HtmlView.fne" - 可能是用于显示地图代码或者预览生成的HTML嵌入代码的文件。 4. "krnln.fnr" - 这个文件名没有明确的指示,但它可能是程序运行所需的库文件或其他支持文件。 总结来说,这个工具软件为公司提供...

Global site tag (gtag.js) - Google Analytics