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 相关文章推荐
jquery CSS选择器笔记
Mar 29 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
深入理解Promise.all
Aug 08 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
vue-cli点击实现全屏功能
Mar 07 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编程网上资源导航
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
自我评价正确写法范文
2013/12/10 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
保险公司年会主持词
2014/03/22 职场文书
保护动物倡议书
2014/04/15 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
设备技术员岗位职责
2015/04/11 职场文书
团队执行力培训心得体会
2015/08/15 职场文书