JS HTML图片显示Canvas 压缩功能


Posted in Javascript onJuly 21, 2017

简单到延伸

最新需要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 base64编码实现代码
Dec 02 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
详解vue axios中文文档
Sep 12 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 #Javascript
详解vue 模版组件的三种用法
Jul 21 #Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 #Javascript
vue-resource调用promise取数据方式详解
Jul 21 #Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 #Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 #Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python发送邮件实例分享
2017/07/28 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
New delete 与malloc free 的联系与区别
2013/02/04 面试题
护士的岗位职责
2013/12/04 职场文书
小学毕业寄语大全
2014/04/03 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016春季运动会前导词
2015/11/25 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js