js通过canvas生成图片缩略图

 更新时间:2020年10月02日 18:11:55   作者:Dean  
对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了

现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片,专业术语也就是生成缩略图,而对于生成缩略图一般做法是通过后端语言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.jb51.net/js/2020/thumbnail/,图片素材是拿的我们做的一个相框制作应用的截图,有兴趣的朋友可以联系我哦,大家一起讨论,一起玩。

相关文章

  • webpack打包js的方法

    webpack打包js的方法

    这篇文章主要介绍了webpack打包js的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 鼠标滑过出现预览的大图提示效果

    鼠标滑过出现预览的大图提示效果

    这篇文章主要介绍了如何实现鼠标滑过出现预览的大图提示效果,需要的朋友可以参考下
    2014-02-02
  • JavaScript setTimeout和setInterval的用法与区别详解

    JavaScript setTimeout和setInterval的用法与区别详解

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,下面这篇文章主要给大家介绍了关于JavaScript setTimeout和setInterval的用法与区别,需要的朋友可以参考下
    2022-04-04
  • JS简单数组排序操作示例【sort方法】

    JS简单数组排序操作示例【sort方法】

    这篇文章主要介绍了JS简单数组排序操作,结合实例形式分析了javascript使用sort方法进行数组排序的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 基于JavaScript实现带缩略图的轮播效果

    基于JavaScript实现带缩略图的轮播效果

    这篇文章主要为大家详细介绍了基于JavaScript实现带缩略图的轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS高级调试技巧:捕获和分析 JavaScript Error详解

    JS高级调试技巧:捕获和分析 JavaScript Error详解

    前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息
    2014-03-03
  • JavaScript的11个小技巧整理

    JavaScript的11个小技巧整理

    这篇文章介绍了JavaScript的11个小技巧,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 详解JS中的柯里化(currying)

    详解JS中的柯里化(currying)

    这篇文章主要介绍了JS中的柯里化(currying),需要的朋友可以参考下
    2017-08-08
  • JS计算输出100元钱买100只鸡问题的解决方法

    JS计算输出100元钱买100只鸡问题的解决方法

    这篇文章主要介绍了JS计算输出100元钱买100只鸡问题的解决方法,简单描述了100元钱买100只鸡问题并结合实例形式分析了问题解决的思路与具体实现方法,需要的朋友可以参考下
    2018-01-01
  • 前端echarts加标记点及标记线和提示框详细代码示例

    前端echarts加标记点及标记线和提示框详细代码示例

    ECharts中的标记线是一条平行于x轴的水平线,有最大值、最小值、平均值等数据的标记线,它也是在series字段下进行配置的,下面这篇文章主要给大家介绍了关于前端echarts加标记点及标记线和提示框的相关资料,需要的朋友可以参考下
    2024-06-06

最新评论