canvas裁剪图片上传,canvas如何上传图片
我们在上传图片的时候一般都会遇到这种情况。第一，后端界面限制上传图片的大小，或者即使后端没有大小限制，但是因为图片太大，前端渲染太慢，页面加载体验很差。因此，我们有必要对上传的图像进行压缩。
本文收录于git thub:github.com/Michael-lzg…
本文主要包括以下过程：
用户通过输入框选择图片，用FileReader预览图片，在画布上绘制图片，用canvas的能力压缩图片，将Base64(DataURL)格式的压缩数据转换成Blob对象上传Input 标签来获取图片
通过将输入标记的type属性设置为file，用户可以选择文件，设置accept以限制所选的文件类型，并绑定onchange事件以获取所选的文件。
输入类型= file accept= image/* onchange= loadFile(event)FileReader
什么是FileReader？我们先来看一下公文的介绍。
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，并使用File或Blob对象来指定要读取的文件或数据。
FileReader常用的两种方法如下：
FileReader.onload:处理load事件。即在阅读操作完成时触发钩子，通过这个钩子功能，可以完成阅读后预览图片，或者阅读后对图片内容进行二次处理等操作。FileReader.readAsData URL:读取方法，读取完成后，result属性会返回一个Data URL格式(Base64编码)的字符串，表示图片内容。在上传图片的过程中，我们可以通过readAsDataURL()方法读取文件，通过result属性获取图片的Base64(DataURL)格式的数据，然后通过这些数据实现图片预览的功能。
div class= container input type= file accept= image/* onchange= loadFile(event)//div script const loadFile=function(event){ let file=event . target . files[0]const reader=new file reader()reader . onload=function(){ console . log(reader . result).} reader . readasdataurl(file)}/scriptcanvas 压缩图片
这是图片上传压缩的核心。我们首先使用Canvas RenderingContext 2D在画布上绘制上传的图像文件。DrawImage()方法，然后使用Canvas.toDataURL()将画布上的图像信息转换为base64(DataURL)格式的数据。
drawImage()
drawImage()方法在画布上绘制图像、画布或视频。drawImage()方法还可以绘制图像的某些部分和/或增加或减小图像的大小。参数如下
Img指定要使用的图像、画布或视频。Sx是可选的。开始切割的x坐标位置。Sy可选。开始切割的y坐标位置。Swidth是可选的。剪辑图像的宽度。身高是可选的。剪辑图像的高度。将图像的x坐标位置放在画布上。在画布上放置图像的y坐标位置。宽度可选。要使用的图像的宽度。(拉伸或缩小图像)高度是可选的。要使用的图像的高度。(拉伸或缩小图像)var cas=document . query selector( canvas )var CTX=cas . get context( 2d )//创建图像对象varimg=newimage () img.src=。/images/1.jpg//图片加载后，img . onload=function(){ CTX . draw image(img，206，111，32，38，100，100，32，38)} canvas.todataurl()
Canvas.toDataURl()方法可以将Canvas上的信息转换成base64(DataURL)格式的图像信息，这是纯字符的图片表示。该方法接收两个参数：
mimeType(可选): 表示需要转换的图像的字符串类型。默认值是图片/png，还可以是图像/jpeg，图像/网页等质量（可选):质量表示转换的图片质量。范围是0 到1。图片的字符串需要是图像/jpeg或者图片/webp，其他字符串值无效。默认压缩质量是0.92。var canvas=文档。createelement(“canvas”)画布。toda aurl( image/JPEG 0.8)到这里，我们先来上帆布压缩图片的代码
函数compress(base64，quality，mime type){ let canvas=document。createelement( canvas )让img=document。创建元素。cross origin= anonymous return new Promise((resolve，reject)={ img。src=base 64 img。onload=()={ let target WIDTH，target height if(img。宽度MAX _ WIDTH){目标宽度=MAX _ WIDTH目标高度=(img。高度*最大宽度)/img。WIDTH } else {目标宽度=img。宽度清除画布ctx.drawImage(img，0，0，canvas.width，canvas。height)设imageData=canvas。toda taurl(mime type，quality/100)resolve(imageData)} }将base64转化为文件
通过window.atob将基数-64字符串解码为二元字符串（二进制文本);将二进制串构造为多部分/表单数据格式；用Uint8Array将几部分的格式的二进制文本转换为ArrayBuffer。函数dataUrlToBlob(base64，mime类型){ let bytes=window。atob(base64。split(，)[1])让ab=新数组缓冲区(字节。length)设ia=new uint 8数组(ab)for(设I=0；我字节。长度；i ) { ia[i]=bytes.charCodeAt(i) }返回新的Blob([ab]，{ type: mimeType })}将图片上传到服务端
创建一个表单数据，把blobappend到上传里面请求服务端接口，提交图片
函数uploadFile(url，blob){ let formData=new formData()let request=new XMLHttpRequest()formData。append( image ，blob) request.open(POST ，url，true) request.send(formData)}ps:在实际开发中，我们要不要把图片转化为上传形式上传到服务端，这就看具体的业务需要了。我们可以上图片上传到腾讯云，直接返回一个 https.xxx.jgp 的图片全球资源定位器(统一资源定位器)用于上传。
到此这篇关于浅析图片上传及帆布压缩的流程的文章就介绍到这了，更多相关图片上传帆布压缩内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。