websocket聊天时,图片压缩处理(url或者input-file)
Posted 奔跑的铃铛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了websocket聊天时,图片压缩处理(url或者input-file)相关的知识,希望对你有一定的参考价值。
业务背景:私信聊天,需要发送图片,但是图片过大需要压缩处理。此时只有图片url,可以使用以下方法:canvasDataURL(url, 目标图片宽度,图片要显示区域的父元素)
注:该文件包含了input-file上传图片的情况(调用photoCompress)
// 压缩图片 export default { methods:{ // 只有blob或者file形式的数据的情况直接调用此方法 // file:文件,w:目标宽度,objDiv:压缩后要放置的目标容器 photoCompress(file, w, objDiv){ var ready = new FileReader() // 异步文件读取机制 ready.readAsDataURL(file) // 图片预览 ready.onload = function(){ var re = this.result this.canvasDataURL(re, w, objDiv) } }, // 只有图片url的情况直接调用此方法,re为url地址 canvasDataURL(re, w, objDiv){ var newImg = new Image() newImg.src = re var imgWidth, imgHeight, offsetX = 0, offsetY = 0 // img的onload事件中同步执行绘制图像的函数,就可以一边装载一边绘制了 newImg.onload = function(){ var img = document.createElement("img") img.src = newImg.src imgWidth = img.width imgHeight = img.height var newHeight = Math.round(imgHeight * w / imgWidth) // 按比例计算压缩后的图片高度 var canvas = document.createElement("canvas") canvas.width = w canvas.height = newHeight var ctx = canvas.getContext(‘2d‘) // clearRect(x,y,width,height) // 参数说明:x、y矩形起点的横纵坐标,width、height表示矩形宽高 ctx.clearRect(0,0,w,newHeight) // 重置图片宽高为压缩后的宽高 imgWidth = w imgHeight = newHeight // drawImage(image,x,y,w,h) // 参数说明:image-Image对象,x、y是绘制时该图像在画布中的起始坐标。w、h表示绘制时图像的宽高 // 该方法也可以复制图片某个区域:drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) // 参数说明:image-Image对象,sx、sy是复制源图像中被复制区域的起点横纵坐标,sw、sh时候被复制区域的宽高 // dx、dy是表示复制后的目标图像在画布中的起始横纵坐标,dw,dh是复制后的目标图像的宽高 ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight) // var base64 = canvas.toDataURL(‘img/png‘,0.7) // 参数表示:指定的图片类型,图片质量 // if(typeof objDiv === ‘object‘){ objDiv.appendChild(canvas) // console.log(base64) // } else if(typeof objDiv === ‘function‘){ // objDiv(base64) // } } } } }
如有问题,请您指出~
以上是关于websocket聊天时,图片压缩处理(url或者input-file)的主要内容,如果未能解决你的问题,请参考以下文章