JS HTML图片显示Canvas 压缩功能

2024-05-06 16:38:32

字体：大中小

来源：转载

供稿：网友

简单到延伸

最新需要html">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 压缩功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JavaScript 用fetch 实现异步下载文件功能

下一篇：原生JS实现自定义滚动条效果