js通过canvas生成图片缩略图(canvas)

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

赞 (0)

相关推荐

  • js通过canvas生成图片缩略图(canvas)

    现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片,专业术语也就是生成缩略图,而对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了. 使用Canvas我们可以轻松生成各种尺寸的图片,具体实现如下: function resizeImage(src,callback,w,h){ var canvas = document.createElement("can

  • js通过canvas生成图片缩略图

    现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片,专业术语也就是生成缩略图,而对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了. 使用Canvas我们可以轻松生成各种尺寸的图片,具体实现如下: function resizeImage(src,callback,w,h){ var canvas = document.createElement("can

  • js 将canvas生成图片保存,或直接保存一张图片的实现方法

    将canvas数组保存 function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click(); } canvas:传入canvas的dom对象 name:保存的图片的名字 直接将图片保存的方法 function downLoadImage(img,name) { var a = documen

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    如何使用JS截取HTML页面为图片呢,下面为大家介绍一款JS截图插件html2canvas.js html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏. html2canvas.js可以将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现. 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建.当 浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现. 以下浏览器能够很好的支持该脚本:

  • 教你用几十行js实现很炫的canvas交互特效

    教你用几十行js实现很炫的canvas交互特效

    目录 1.画圆 2.鼠标移动的圆 3.鼠标拖动的粒子 4.颜色渐变的粒子 5.连接的粒子 总结 废话不多说,先上效果图! 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频,他还出了很多关于canvas的视频,十分值得学习,而我对canvas也不太熟悉,跟着大神一起敲代码,做个学习笔记,还要说一下,本文示例的页面结构很简单(html只包含一个canvas),后面代码部分就不贴了,毕竟js才是主角. 1.画圆 首先从画一个静态的圆开始吧,只需要了解很少的API即可,M

  • js仿土豆网带缩略图的焦点图片切换效果实现方法

    本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • PHP基于GD库实现的生成图片缩略图函数示例

    本文实例讲述了PHP基于GD库实现的生成图片缩略图函数.分享给大家供大家参考,具体如下: <?php /** * 生成缩略图函数(支持图片格式:gif.jpeg.png和bmp) * @author ruxing.li * @param string $src 源图片路径 * @param int $width 缩略图宽度(只指定高度时进行等比缩放) * @param int $width 缩略图高度(只指定宽度时进行等比缩放) * @param string $filename 保存路径(不指

  • php生成图片缩略图的方法

    本文实例讲述了php生成图片缩略图的方法.分享给大家供大家参考.具体如下: 这里需要用到GD2 library function make_thumb($src,$dest,$desired_width) { /* read the source image */ $source_image = imagecreatefromjpeg($src); $width = imagesx($source_image); $height = imagesy($source_image); /* find

  • 基于GD2图形库的PHP生成图片缩略图类代码分享

    要使用PHP生成图片缩略图,要保证你的PHP服务器安装了GD2图形库 使用一个类生成图片的缩略图 1.使用方法 $resizeimage = new resizeimage("图片源文件地址", "200", "100", "0","缩略图地址"); //就只用上面的一句话,就能生成缩略图,其中,源文件和缩略图地址可以相同,200,100分别代表宽和高 2. 缩略图类代码 //使用如下类就可以生成图片缩略图

随机推荐