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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
js实现验证码干扰(动态)
Feb 23 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python高效编程技巧
2013/01/07 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
Python如何读写字节数据
2020/08/05 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Hotels.com中国区:好订网
2016/08/18 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
半年思想汇报
2013/12/30 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
四年级下册教学反思
2014/02/01 职场文书
广告词串烧
2014/03/19 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫