JS HTML图片显示Canvas 压缩功能
程序员文章站
2023-09-06 18:47:07
简单到延伸
最新需要js 文件压缩图片上传 以前没搞过,新手把学习过程分享
一.选择图片并显示
简单到延伸
最新需要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 压缩功能,希望对大家有所帮助
上一篇: 人参当归鸡汤的做法