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 相关文章推荐
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
初识Javascript小结
Jul 16 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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建立文件夹代码
2015/01/06 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
Javascript实现的分页函数
2007/02/07 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
python显示天气预报
2014/03/02 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
库房主管岗位职责
2013/12/31 职场文书
餐饮营销方案
2014/02/23 职场文书
2014年元旦感言
2014/03/06 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
司法所长先进事迹
2014/06/02 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
浅析Python中的套接字编程
2021/06/22 Python
详解nginx location指令
2022/01/18 Servers
Python中itertools库的四个函数介绍
2022/04/06 Python