JS HTML图片显示Canvas 压缩功能

时间：2021-05-26

简单到延伸

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章