canvas压缩图片上传,canvas 图片缩放
之前写过一篇有关帆布图片处理的文章，今天我们讲讲如何使用帆布来压缩图片。
Canvas图片压缩流程
接下来我将以具体实例为大家讲解帆布图片压缩的具体流程。
一、本地图片输入
1.获取本地文件
！-HTML-input type= file id= choose-img ///JSvar choose img=document。getelementbyid( choose-img )；选择img。onchange=function(e){ var file=this。文件[0]；//…… (省略部分代码后续依次展示，下同)};很简单，就是通过类型类型为文件的按钮来获取本地文件。
2. 判断所获取的本地文件类型
！-HTML-div id= result /div//JSvar result=document。getelementbyid(“结果”)；//用于显示图片输出结果，或者错误提示if(/image/).test(file.type)){ //判断文件类型是否为图片//……} else { result。innerhtml= span style= color:red；文件类型有误！/span ；}3. 将所获取的本地图片以base64格式输出
var img=new Image()，//创建图片对象，用于放置原始图片reader=新文件读取器()；reader.readAsDataURL(文件);//以base64格式读取并存入字符输入流对象的结果属性中读者。onload=function(){ img。src=这个。结果；//将图片base64字符串直接赋予图像对象的科学研究委员会中document.body.insertBefore(img，选择img)；//将输出的图片插入到文件按钮之前img。onload=function(){//……}；};二、在Canvas画布中绘制图片
1. 创建画布
var canvas=文档。createelement(“canvas”)；画布。宽度=img。客户端宽度；画布。身高=img。客户身高；var context=画布。获取上下文(“2d”)；注意：画布大小与所输入图片宽高相同。
2. 绘制图片
context.drawImage(img，0，0，canvas.width，canvas。身高)；三、压缩图片并输出
！- HTML -图片压缩比率：input id= rate type= number min= 0 max= 100 /%//JSvar rate=document。getelementbyid( rate ).值 100;//输入图片压缩比率，默认为100% var imgUrl=canvas。toda taurl(文件。式中，费率/100)；//第一个参数为输出图片类型，第二个为压缩比result.innerHTML=压缩后：img src= imgUrl /；//将压缩后的图片置于结果中显示img。风格。display= none//将原始图片隐藏将在帆布画布中所绘制的图片再次以base64格式输出。
四、完整代码展示
！- HTML -图片压缩比率：输入id= rate type= number min= 0 max= 100 /% input type= file id= choose-img /div id= result /div//JSvar choose img=document。getelementbyid( choose-img )，结果=文档。getelementbyid(“结果”)；选择img。onchange=function(e){ var file=this。文件[0]；if(/image/).测试(文件。type)){ var img=new Image()，reader=new FileReader()；reader.readAsDataURL(文件);读者。onload=function(){ img。src=这个。结果；document.body.insertBefore(img，选择img)；img。onload=function(){ var canvas=document。createelement(“canvas”)；画布。宽度=img。客户端宽度；画布。身高=img。客户身高；var context=画布。获取上下文(“2d”)；context.drawImage(img，0，0，canvas.width，canvas。身高)；var rate=文档。getelementbyid( rate ).值 100;var imgUrl=canvas。toda taurl(文件。式中，费率/100)；result.innerHTML=压缩后：img src= imgUrl /；结果。风格。display= blockimg。风格。display= none};};} else {结果。innerhtml= span style= color:red；文件类型有误！/span ；}};经测试发现，通过帆布压缩联合图像专家组格式图片效果最佳，巴布亚新几内亚压缩效果不明显，有时反而变得更大。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。