当前位置:首页 > 编程教程 > javascript技术文章 > Js利用Canvas实现图片压缩功能

详解Js利用Canvas实现图片压缩功能

  • 发布时间:
  • 作者:码农之家
  • 点击:105

这篇文章主要知识点是关于Js、Canvas、图片压缩、JS和Canvas实现图片的预览压缩和上传功能 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

学习JavaScript数据结构与算法
  • 类型:JavaScript大小:13.6 MB格式:PDF作者:洛伊安妮
立即下载

Js利用Canvas实现图片压缩功能

最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢。为此,需要对图片进行压缩处理来优化上传功能。以下是具体实现:

/* 
 * 图片压缩
 * img    原始图片
 * width   压缩后的宽度
 * height  压缩后的高度
 * ratio   压缩比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;
        
   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;
        
   ctx = canvas.getContext("2d");        
   ctx.drawImage(img, 0, 0, width, height);
        
   img64 = canvas.toDataURL("image/jpeg", ratio);
        
   return img64;
 }

上面是一个图片压缩函数,返回 base64 格式的图片数据。 其中压缩比率取值(0 - 1 之间)越大图片质量越高。建议不要将图片转为 png 格式,因为转为 png 格式,图片的 base64 比转为 jpeg 的要长不少。下面是实际调用:

var image = new Image();
image.src = "/img/test.jpg";
      
image.onload = function(){
  var img64 = compress(image, 500, 400, 0.7);
  document.getElementById("test").src = img64;
}

注意: 压缩方法的调用以及图片src赋值必须放在图片的 onload 方法里面。因为只有等图片加载完成后才能进行压缩处理,从而转换为base64 进行赋值。 如果放在 onload 方法外面,则可能压缩代码无效,或者会生成一张纯黑色的图片。

以上这篇Js利用Canvas实现图片压缩功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

JS和Canvas实现图片的预览压缩和上传功能

先来一张效果图,压压惊

JS和Canvas实现图片的预览压缩和上传功能

第一步:用户选择需要上传的图片

<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 

在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax或者其他方式上传。

第二步:获取图片资源压缩预览上传

function upload() { 
  let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件,这里是图片类型 
  let reader = new FileReader() 
    reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 
    reader.onload = function(e) { // 文件读取完成时触发  
      let result = e.target.result // base64格式图片地址  
      var image = new Image() image.src = result // 设置image的地址为base64的地址  
      image.onload = function(){  
        var canvas = document.querySelector("#canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设置canvas的画布宽度为图片宽度  
        canvas.height = image.height;  
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比,可根据需要设置,设置过小会影响图片质量  
                                  // dataUrl 为压缩后的图片资源,可将其上传到服务器  
      }  
    } 
 } 

现在我们来比较一下图片是否成功压缩:

原图大小: 

JS和Canvas实现图片的预览压缩和上传功能  

压缩比设置为0.92:

JS和Canvas实现图片的预览压缩和上传功能

压缩比设置为0.52

JS和Canvas实现图片的预览压缩和上传功能

乍一看,你是不是觉得很奇怪,为什么设置了缩放比为0.92,图片居然比原图大?其实图片通过base64编码后都会变的比原图大,具体原因可以查阅base64的编码原理。如此看来,我们已经成功压缩了图片!

注意点:canvas在IE9以下不支持;大图片尽量不要使用base64,影响响应速度。

总结

以上所述是小编给大家介绍的JS和Canvas实现图片的预览压缩和上传功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • js canvas如何实现图片放大镜功能
  • Js利用Canvas实现图片压缩功能 相关电子书
    学习笔记
    网友NO.946196

    js 将canvas生成图片保存,或直接保存一张图片的实现方法

    将canvas数组保存 function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click();} canvas: 传入canvas的dom对象 name: 保存的图片的名字 直接将图片保存的方法 function downLoadImage(img,name) { var a = document.createElement("a"); a.href = img.src; a.download = name; a.click();} img: 图片的dom对象 name: 保存为图片时的名字 以上这篇js 将canvas生成图片保存,或直接保存一张图片的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

    网友NO.641635

    js canvas画布实现高斯模糊效果

    最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实现了当前的案例: !doctype htmlhtml lang="zh"head meta charset="UTF-8" meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titlecanvas画布的高斯模糊效果/title/headbodycanvas id="canvas"/canvas/bodyscript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); let img = new Image(); //这里直接修改图片的路径 img.src = "636753681750720000/Block/preview.jpg"; img.onload = function () { //设置canvas的宽高 canvas.height = img.height; canvas.width = img.width; //将图像绘制到canvas上面 ctx.drawImage(img, 0, 0, ……

    网友NO.292967

    js+canvas实现验证码功能

    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titleDocument/title link rel="stylesheet" href="index.css" rel="external nofollow" /headbody div class="wrapper" div class="inputBox" input type="text" class = 'inputCaptcha' placeholder = "请输入验证码" span class="captchaIcon"/span /div p class="errorText"/p div class="canvasBox" div class="imageBox" canvas width =300 height=80 id = 'canvasCaptcha'/canvas input type="button" class='refresh' /div /div button class="captchaSubmit"submit/button /div script src='./jquery.js'/script script src = './index.js'/script/body/html css * { margin: 0; padding: 0;}.wrapper { width: 345px; border: 1px solid #ccc; border-radius: 10px; padding: 20px 10px; margin: 30px 30px;}.inputBox { width: 345px; margin: 0 aut……

    网友NO.778597

    原生JS+Canvas实现五子棋游戏实例

    一、功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二、代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i 15; i++){ context.moveTo(15 + i * 30 , 15); context.lineTo(15 + i * 30 , 435); context.stroke(); context.moveTo(15 , 15 + i * 30); context.lineTo(435 , 15 + i * 30); context.stroke(); } } 知道格子数后,我们先看五子棋有多少种赢法: //赢法数组 var wins = []; for(var i = 0; i 15; i++){ wins[i] = []; for(var j = 0; j 15; j++){ wins[i][j] = []; } } var count = 0; //赢法总数 //横线赢法 for(var i = 0; i 15; i++){ for(var j = 0; j 11; j++){ for(var k = 0; k 5; k++){ wins[i][j+k][count] = true; } count++; } } //竖线赢法 for(var i = 0; i 15; i++){ for(var j = 0; j 11; ……

    网友NO.471554

    JS+HTML5 canvas绘制验证码示例

    本文实例讲述了JS+HTML5 canvas绘制验证码。分享给大家供大家参考,具体如下: css样式: stylebody{ text-align: center;}canvas{ background:#ddd;}/style HTML部分: body中添加标签canvas: canvas id="c3"/canvas js部分: //创建两个变量保存验证码的宽度和高度 var w = 120; var h = 30;//将变量值赋值给canvas c3.width = w; c3.height = h;//获取画笔 var ctx = c3.getContext("2d");//创建两个函数,返回指定范围内的随机数,随机颜色//随机数 function rn(min,max){ var n = Math.random()*(max-min)+min; return Math.floor(n); }//随机颜色 function rc(min,max){ var r = rn(min,max); var g = rn(min,max); var b = rn(min,max); return `rgb(${r},${g},${b})`;}//填充的背景 ctx.fillStyle=rc(180,230); ctx.fillRect(0,0,w,h);//创建一个随机的文字[字母和数字]4个 var pool = "ABCDEFGHIJKabced胡歌0123456789哈哼哈哈"; var str =""; for(var i = 0;i4;i++){ var index = Math.floor(Math.random()*pool.length); str ……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    投诉 / 推广 / 赞助:QQ:520161757