一键打包小程序_JS HTML图片显示Canvas 压缩功用

2021-01-11 15:59

JS HTML图片显示Canvas 压缩功能       最新需要js 文件压缩图片上传 以前没搞过,新手把学习过程分享,对JS HTML图片显示Canvas 压缩功能感兴趣的朋友一起看看吧

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




扫描二维码分享到微信

在线咨询
联系电话

020-66889888