现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片，专业术语也就是生成缩略图，而对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了。
使用Canvas我们可以轻松生成各种尺寸的图片，具体实现如下：
function resizeImage(src,callback,w,h){
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
im = new Image();
w = w || 0,
h = h || 0;
im.onload = function(){
//为传入缩放尺寸用原尺寸
!w && (w = this.width);
!h && (h = this.height);
//以长宽最大值作为最终生成图片的依据
if(w !== this.width || h !== this.height){
var ratio;
if(w>h){
ratio = this.width / w;
h = this.height / ratio;
}else if(w===h){
if(this.width>this.height){
ratio = this.width / w;
h = this.height / ratio;
}else{
ratio = this.height / h;
w = this.width / ratio;
}else{
ratio = this.height / h;
w = this.width / ratio;
//以传入的长宽作为最终生成图片的尺寸
if(w>h){
var offset = (w - h) / 2;
canvas.width = canvas.height = w;
ctx.drawImage(im,0,offset,w,h);
}else if(w
var offset = (h - w) / 2;
canvas.width = canvas.height = h;
ctx.drawImage(im,offset,0,w,h);
}else{
canvas.width = canvas.height = h;
ctx.drawImage(im,0,0,w,h);
callback(canvas.toDataURL("image/png"));
im.src = src;
在线实例地址：http://demo.jb51.net/js/2020/thumbnail/,图片素材是拿的我们做的一个相框制作应用的截图，有兴趣的朋友可以联系我哦,大家一起讨论，一起玩。
现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片，专业术语也就是生成缩略图，而对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了。使用Canvas我们可以轻松生成各种尺寸的图片，具体实现如下：function resizeImage(src,callbac...
private Logger log = LoggerFactory.getLogger(getClass());
private static String DEFAULT_PREVFIX = "thumb_";
pr...
要求：不管
原图
大小多大，统一缩小成指定宽度，高度则按照宽度缩小的比例自适应... 例如：
原图
分辨率是1000（weight） x 600（Height）；假设固定宽度为200，高度自动缩小相同比例，最后
缩略图
尺寸为：200 x 120.
1.将以下
JS
代码放在页面顶部，或者放在要调整
图片
的前面
function ReSizePic(ThisPic){
var RePicWidth
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad_(this,200,200)"/>
<input id="upload_img" type="file" onchange="onUploadImgChange(this,'preview','preview_fake','preview_size_fake')"/>
<img id="preview_size_fake"/>
</body>
<meta http-equiv="Content-Type" content="text/
html
; charset=UTF-8">
[removed][removed]
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
```javascript
function generateThumbnail(file, maxWidth, maxHeight, callback) {
var img = new Image();
img.onload = function() {
var
canvas
= document.createElement('
canvas
');
var ctx =
canvas
.getContext('2d');
var width = img.width;
var height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
canvas
.width = width;
canvas
.height = height;
ctx.drawImage(img, 0, 0, width, height);
var dataURL =
canvas
.toDataURL('image/jpeg');
callback(dataURL);
img.src = URL.createObjectURL(file);
调用示例：
```javascript
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
generateThumbnail(file, 100, 100, function(dataURL) {
console.log(dataURL);
其中，maxWidth和maxHeight分别表示
生成
缩略图
的最大宽度和最大高度，callback是
生成
缩略图
后的回调函数，dataURL是
生成
的BASE64编码的字符串。
