JS HTML图片显示Canvas 压缩功能

更新时间：2017年07月21日 14:28:26 作者：多米的大大

最新需要js 文件压缩图片上传以前没搞过，新手把学习过程分享，对JS HTML图片显示Canvas 压缩功能感兴趣的朋友一起看看吧

简单到延伸

最新需要js 文件压缩图片上传以前没搞过，新手把学习过程分享

一.选择图片并显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>Title</title>
</head>
<body>
<input id="imginput" type="file" accept="image/*" onchange="showImg(this)">
<div id="img1">
  <canvas class="convas01"></canvas>
</div>
</body>
<script>
  window.URL=window.URL||window.webkitURL;
  var divimg1 = document.getElementById("img1");
  function showImg(obj){
    var files = obj.files;
    var img = new Image();
    img.width = 100;
    if(window.URL){
      img.src = window.URL.createObjectURL(files[0]);
    }else{
      //opera不支持createObjectURL/revokeObjectURL方法。需要用FileReader对象来处理
      var reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = function(e){
        img.src = this.result;
        img.width = 200;
        img.id="img01";
        divimg1.appendChild(img);
      }
    }
    img.id="img01";
    divimg1.appendChild(img);
  }
</script>
</html>

二.使用canvas代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>Title</title>
</head>
<body>
 <input id="imginput" type="file" accept="image/*" onchange="showImg(this)">
 <div id="img1">
  <canvas id="convas01"></canvas>
 </div>
</body>
 <script>
  window.URL=window.URL||window.webkitURL;
  var divimg1 = document.getElementById("img1");
  var convas = document.getElementById("convas01");
  var ht = convas01.getContext("2d");
  convas.width = 200;
  convas.height = 200;
   function showImg(obj){
     var files = obj.files;
     var img = new Image();
     img.width = 200;
    if(window.URL){
      img.src = window.URL.createObjectURL(files[0]);
      img.onload = function(e){
        window.URL.revokeObjectURL(this.src);//方便引用无效回收
        ht.clearRect(0, 0, convas.width, convas.width);//clearRect() 方法清空给定矩形内的指定像素。
        ht.drawImage(img,0,0,convas.width,convas.height);
        convas.toDataURL("image/png");
      }
    }else{
      //opera不支持createObjectURL/revokeObjectURL方法。需要用FileReader对象来处理
      var reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = function(){
        img.src = this.result;
        img.width = 200;
        img.id="img01";
        divimg1.appendChild(img);
      }
    }
   }
 </script>
</html>

三.压缩处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>Title</title>
</head>
<body>
 <input id="imginput" type="file" accept="image/*" onchange="showImg(this)">
 <div id="img1">
   canvas图片
  <canvas id="convas01"></canvas>
 </div>
<div id="img2">
压缩图片
</div>
</body>
 <script>
  window.URL=window.URL||window.webkitURL;
  var divimg1 = document.getElementById("img1");
  var divimg2 = document.getElementById("img2");
  var convas = document.getElementById("convas01");
  var ht = convas01.getContext("2d");
  convas.width = 200;
  convas.height = 200;
   function showImg(obj){
     var files = obj.files;
     var img = new Image();
     img.width = 200;
    if(window.URL){
      img.src = window.URL.createObjectURL(files[0]);
      img.onload = function(e){
        window.URL.revokeObjectURL(this.src);//方便引用无效回收
        ht.drawImage(img,0,0,convas01.width,convas01.height);
        var imgdata = convas.toDataURL("image/png");
        //将canvas转化成Blob对象
        var imgobj = new Image();
        var blob =dataURLtoBlob(imgdata);
        var url = window.URL.createObjectURL(blob);
        imgobj.onload = function(e){
          window.URL.revokeObjectURL(this.src);
        }
        imgobj.src= url;
        divimg2.appendChild(imgobj);
      }
    }else{
      //opera不支持createObjectURL/revokeObjectURL方法。需要用FileReader对象来处理
      var reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = function(){
        img.src = this.result;
        img.width = 200;
        img.id="img01";
        divimg1.appendChild(img);
      }
    }
   }
  function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
  }
 </script>
</html>

四.分辨率调节尝试

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;padding:0;
    }
    body{
      width:100%;height:100%;background:black;
    }
    canvas{
      width:800px;height:480px;outline:1px solid pink;position:absolute;
      left:0;top:0;right:0;bottom:0;margin:auto;
    }
  </style>
</head>
<body>
<button>240x120</button>
<button>320x240</button>
<button>480x320</button>
<button>640x420</button>
<button>800x480</button>
<canvas id="canvasId" width="480" height="320">
  Your browser does not support the canvas element.
</canvas>
<script>
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');
  var btns = document.getElementsByTagName('button');
  var resolution = [
    [240, 120],
    [320, 240],
    [480, 320],
    [640, 420],
    [800, 480]
  ];
  //canvas分辨率
  var resolutionW = canvas.getAttribute('width');
  var resolutionH = canvas.getAttribute('height');
  //canvas大小
  var sizeW = canvas.offsetWidth;
  var sizeH = canvas.offsetHeight;
  console.log(resolutionW);
  console.log(resolutionH);
  console.log(sizeW);
  console.log(sizeH);
  var img = new Image();
  img.src = "http://img5.niutuku.com/phone/1301/0920/0920-niutuku.com-483082.jpg"; //这张图片像素为800x480
  img.onload = function() {
    draw(3);
    for (var i = 0; i < btns.length; i++) {
      (function(i) {
        btns[i].onclick = function() {
          draw(i);
        }
      })(i);
    }
  }
  function draw(i) {
    canvas.setAttribute('width', resolution[i][0]);
    canvas.setAttribute('height', resolution[i][1]);
    context.clearRect(0, 0, sizeW, sizeH);
    context.drawImage(img, 0, 0, sizeW, sizeH, 0, 0, resolution[i][0], resolution[i][1]);
  }
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的JS HTML图片显示Canvas 压缩功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

javascript 获取页面的高度及滚动条的位置的代码
javascript获取页面的高度及滚动条的位置的代码，需要的朋友可以参考下。
2010-05-05
bootstrap-table组合表头的实现方法
本篇文章主要介绍了bootstrap-table组合表头的实现方法，非常具有实用价值，需要的朋友可以参考下
2017-09-09
es6学习笔记之Async函数基本教程
这篇文章主要给大家介绍了关于es6中Async函数的基本教程，文中介绍的非常详细，对大家学习async函数具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。
2017-05-05
JS实现Enter键跳转及控件获得焦点
想让Enter键跳转的同时让控件获得焦点，具体实现js代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
js弹出窗口返回值的简单实例
下面小编就为大家带来一篇js弹出窗口返回值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
javascript检测flash插件是否被禁用的方法
这篇文章主要介绍了javascript检测flash插件是否被禁用的方法,涉及JavaScript调用ActiveXObject组件操作flash插件的相关技巧,需要的朋友可以参考下
2016-01-01
用Javascript来生成ftp脚本的小例子
昨天闲着没事，又因为工作需要，写了一个脚本，用来做ftp。当然不是直接做ftp，而是产生一个ftp的脚本，供ftp命令使用。
2013-07-07
无废话JavaScript教程(全集)
许多读者认为我那本《JavaScript语言精髓与编程实践》读来辛苦，所以我一直想写个简单的读本。索性，这次就写个最简单的吧。
2008-10-10
微信小程序中的数据存储实现方式
这篇文章主要介绍了微信小程序中的数据存储实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-08-08
js实现内置计时器
这篇文章主要为大家详细介绍了js实现内置计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12