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 相关文章推荐
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
一次编写,随处运行
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
园林资料员岗位职责
2013/12/30 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python