博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图片缩略图
阅读量:5297 次
发布时间:2019-06-14

本文共 998 字,大约阅读时间需要 3 分钟。

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<h){
            
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;
}

转载于:https://www.cnblogs.com/hy-l92/p/11101318.html

你可能感兴趣的文章
在现有的mysql主从基础上,搭建mycat实现数据的读写分离
查看>>
[Flex] flex手机项目如何限制横竖屏?只允许横屏?
查看>>
tensorflow的graph和session
查看>>
JavaScript动画打开半透明提示层
查看>>
Mybatis生成resulteMap时的注意事项
查看>>
jquery-jqzoom 插件 用例
查看>>
1007. Maximum Subsequence Sum (25)
查看>>
iframe的父子层跨域 用了百度的postMessage()方法
查看>>
图片生成缩略图
查看>>
动态规划 例子与复杂度
查看>>
查看oracle数据库的连接数以及用户
查看>>
【数据结构】栈结构操作示例
查看>>
中建项目环境迁移说明
查看>>
三.野指针和free
查看>>
activemq5.14+zookeeper3.4.9实现高可用
查看>>
TCP/IP详解学习笔记(3)IP协议ARP协议和RARP协议
查看>>
简单【用户输入验证】
查看>>
python tkinter GUI绘制,以及点击更新显示图片
查看>>
HDU4405--Aeroplane chess(概率dp)
查看>>
CS0103: The name ‘Scripts’ does not exist in the current context解决方法
查看>>