说说图片上传和canvas压缩的过程

canvas压缩图这是上传的压缩图核心是，我们首先使用CanvasRenderingContext2D.drawImage()方法将上传的图片文件绘制到画布上，然后使用Canvas.toDataURL()将画布上的图像信息转换为base64(DataURL)格式的数据。drawImage()drawImage()方法在画布上绘制图像、画布或视频。drawImage()方法还可以绘制图像的一部分，和/或增加或减小图像的大小。以下参数img指定要使用的图像、画布或视频。sx是可选的。开始剪裁的x坐标位置。sy是可选的。开始裁剪的y坐标位置。宽度是可选的。裁剪图像的宽度。大小是可选的。裁剪图像的高度。x画布上用于放置图像的x坐标位置。y画布上放置图像的y坐标位置。宽度是可选的。要使用的图像的宽度。（拉伸或收缩图像）高度可选。要使用的图像的高度。(拉伸或收缩图像)varcas=document.querySelector('canvas')varctx=cas.getContext('2d')//先创建图像对象varimg=newImage()img.src='./images/1.jpg'//图片加载完成后img.onload=function(){ctx.drawImage(img,206,111,32,38,100,100,32,38)}Canvas.toDataURl()Canvas.toDataURl()方法可以将画布上的信息转换为base64(DataURL)格式的图片信息，是纯字符的图片表示。该方法接收2个参数：mimeType（可选）：表示要转换的图片的mimeType类型。默认值为image/png，也可以为image/jpeg、image/webp等。quailty（可选）：quality表示转换后的图片质量。范围是0到1。图片的mimeType需要是image/jpeg或者image/webp，其他mimeType值无效。默认压缩质量为0.92。varcanvas=document.createElement('canvas')canvas.toDataURL("image/jpeg"0.8)在这里，让我们从画布上压缩图像的代码开始functioncompress(base64,quality,mimeType){letcanvas=document.createElement('canvas')letimg=document.createElement('img')img.crossOrigin='anonymous'returnnewPromise((resolve,reject)=>{img.src=base64img.onload=()=>{让targetWidth,targetHeightif(img.width>MAX_WIDTH){targetWidth=MAX_WIDTHtargetHeight=(img.height*MAX_WIDTH)/img.width}else{targetWidth=img.widthtargetHeight=img.height}canvas.width=targetWidth画布.高度=targetHeightletctx=canvas.getContext('2d')ctx.clearRect(0,0,targetWidth,targetHeight)//清除画布ctx.drawImage(img,0,0,canvas.width,canvas.height)letimageData=canvas.toDataURL(mimeType,quality/100)resolve(imageData)}})}通过window.atob将base64转成文件将base-64字符串解码为binaryString（二进制文本）；将binaryString构造成multipart/form-data格式；使用Uint8Array将多部分格式的二进制文本转换为ArrayBufferfunctiondataUrlToBlob(base64,mimeType){letbytes=window.atob(base64.split(',')[1])letab=newArrayBuffer(bytes.length)letia=newUint8Array(ab)for(leti=0;i