websocket聊天时，图片压缩处理（url或者input-file）

// 压缩图片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) ???????// } ?????} ???} ?}}