在写一篇关于画布图像处理的文章之前，今天我们将讨论如何使用画布来压缩图片。

画布图像压缩过程


接下来，我将用具体的例子解释画布图片压缩的具体流程。

1。局部图像输入

1。获取本地文件








无功chooseimg = document.getelementbyid（选择图片）；
chooseimg.onchange =功能（e）{
var文件=这个文件{ 0 }；
/ / （略随后依次显示部分代码，下同）
}；


通过类型类型的按钮作为文件获取本地文件是非常简单的。

2。确定获得的本地文件类型









VaR结果= document.getelementbyid（结果）； / /显示画面输出，或错误
如果（测试）文件类型是。
hellip / hellip；
}
别的{
result.innerhtml =文件类型是错误的！；
}



三.在Base64格式输出的局部图像


VaR img =新（图像）， / /创造的原始图片的位置图片对象
读者= FileReader（）；
reader.readasdataurl（文件）； / / base64格式的读取和存储的对象的属性有结果
reader.onload =函数（）{
img.src = this.result； / /图片base64字符串直接给出图像对象SRC
document.body.insertbefore（IMG，chooseimg）； / /输出将被插入到文档中的图片按钮之前
img.onload =函数（）{
hellip / hellip；
}；
}；


两。在画布上画画

1。创建画布


VaR的画布document.createelement（'canvas）；
canvas.width = img.clientwidth；
canvas.height = img.clientheight；
VaR上下文= canvas.getcontext（二维的）；


注意：画布的大小与输入图片的宽度相同。

2。画画


context.drawimage（IMG，0,0，canvas.width，帆布，高度）；


三。压缩图片和输出



图片压缩比：%




风险率= document.getelementbyid（率）。| |值100； / /输入图像的压缩比，默认是100%
无功imgurl = canvas.todataurl（file.type，率 / 100）； / /的第一个参数是输出的图片类型二的压缩比
result.innerhtml = ''； / /：压缩图像的显示结果压缩
img.style.display =没有人'； / /隐藏原始图片


这是画在画布上的油画图片输出又在Base64格式。

四。完整的代码显示



图片压缩比：%






无功chooseimg = document.getelementbyid（选择图片），
结果：document.getelementbyid（结果）；
chooseimg.onchange =功能（e）{
var文件=这个文件{ 0 }；
如果（测试（文件类型））{
VaR img =新的图像（），
读者= FileReader（）；
reader.readasdataurl（文件）；
reader.onload =函数（）{
img.src = this.result；
document.body.insertbefore（IMG，chooseimg）；
img.onload =函数（）{
VaR的画布document.createelement（'canvas）；
canvas.width = img.clientwidth；
canvas.height = img.clientheight；
VaR上下文= canvas.getcontext（二维的）；
context.drawimage（IMG，0,0，canvas.width，帆布，高度）；
风险率= document.getelementbyid（率）。| |价值100；
无功imgurl = canvas.todataurl（file.type，率/ 100）；
result.innerhtml =压缩后：；
result.style.display =阻止；
img.style.display =不关；
}；
}；
}
别的{
result.innerhtml =文件类型是错误的！；
}
}；



经过测试，发现画布压缩jpeg格式具有最佳的图片效果，PNG压缩效果不明显，但有时会变大。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。