js通过canvas生成图片缩略图


Posted in Javascript onOctober 02, 2020

现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片,专业术语也就是生成缩略图,而对于生成缩略图一般做法是通过后端语言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<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;
}

在线实例地址:http://demo.3water.com/js/2020/thumbnail/,图片素材是拿的我们做的一个相框制作应用的截图,有兴趣的朋友可以联系我哦,大家一起讨论,一起玩。

Javascript 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 #Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 #Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 #Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 #Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 #Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 #Javascript
jQuery实现二级导航菜单的示例
Sep 30 #jQuery
You might like
php设计模式 State (状态模式)
2011/06/26 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php旋转图片90度的方法
2013/11/07 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
python 动态调用函数实例解析
2019/10/21 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python 星号(*)的多种用途
2020/09/21 Python
python 模拟登录B站的示例代码
2020/12/15 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
民主生活会批评与自我批评总结
2014/10/17 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
初中团支书竞选稿
2015/11/21 职场文书
护士业务学习心得体会
2016/01/25 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS