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

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

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

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

学习JavaScript数据结构与算法 查看详情

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实现图片的预览压缩和上传功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到echarts中箱线图的分析与绘、 让JS验证密码不能为空的实、 JavaScript中的call、apply方法、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:js选项卡切换效果实现代码

下一篇:JS中正则表达式全局匹配模式/g用法实例

展开 +

收起 -

Js利用Canvas实现图片压缩功能 相关内容
js canvas如何实现图片放大镜功能

这篇文章主要为大家详细介绍了js canvas实现放大镜查看图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

查看详情
你不知道的JavaScript(中卷)

JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。

查看详情
看透JavaScript:原理、方法与实践

本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

查看详情
JavaScript忍者秘籍

这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

查看详情
JavaScript基础教程

本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式

查看详情
Three.js开发指南:WebGL的JavaScript 3D库 查看详情
JavaScript核心技术开发解密

这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

查看详情
大型JavaScript应用最佳实践指南 查看详情
Js利用Canvas实现图片压缩功能 学习笔记
网友NO.502756

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.424002

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.705887

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.124624

原生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.997675

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 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757