vue图片裁剪上传,canvas裁剪图片上传
本文主要介绍Vue使用canvas实现图像压缩和上传。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue使用canvas压缩上传图片的具体代码，供大家参考。具体内容如下。
场景：如用户头像等。
对于上传大尺寸图片，前端压缩不仅节省了流量，也大大提升了用户体验。
两方面：
1.因为上传的图片尺寸比较小，上传速度会更快，交互更流畅，网络异常导致上传失败的风险也会大大降低。
2.很多网站的图片上传功能都会限制图片的大小，尤其是图片上传。把图像限制在5M或者2M是很常见的(但是我是用单反拍的图像，图像超过2M是很正常的，所以上传之前要对图像进行处理)。如果能在前端进行压缩，理论上就没必要限制画面大小。
示例：
主要技术：canvas方法使用drawImage()。(附件：canvas.toDataURL()或canvas.toBlob())
ctx.drawImage(image，dx，dy)；
ctx.drawImage(image，dx，dy，dWidth，d height)；
ctx.drawImage(image，sx，sy，sWidth，sHeight，dx，dy，dWidth，d height)；
示例：
//html
输入id=文件类型=文件
//JS
var eleFile=document . query selector( # file )；
//压缩图片所需的一些元素和对象
var reader=new FileReader()，img=new Image()；
//选定的文件对象
var file=null
//缩放图片所需的画布
var canvas=document . createelement( canvas )；
var context=canvas . get context( 2d )；
//加载base64地址的图像后
img.onload=function () {
//图片的原始大小
var originWidth=this.width
var originHeight=this.height
//最大大小限制
var maxWidth=400，maxHeight=400
//目标大小
var targetWidth=originWidth，targetHeight=originHeight
//图片大小超过了400x400的限制
if(origin width max width origin height max height){
if(origin width/origin height maxWidth/max height){
//更宽，根据宽度定义大小
targetWidth=maxWidth
target height=math . round(maxWidth *(origin height/origin width))；
}否则{
targetHeight=maxHeight
target width=math . round(max height *(origin width/origin height))；
}
}
//canvas缩放图片。
canvas.width=targetWidth
canvas.height=targetHeight
//清除画布
context.clearRect(0，0，targetWidth，target height)；
//图像压缩
context.drawImage(img，0，0，targetWidth，target height)；
//画布转换为blob并上传
canvas.toBlob(函数(blob) {
//图片ajax上传
var xhr=new XMLHttpRequest()；
//文件上传成功。
xhr . onreadystatechange=function(){
if (xhr.status==200) {
//xhr.responseText是返回的数据。
}
};
//开始上传
xhr.open(POST ， upload.php ，true)；
xhr . send(blob)；
}，file . type image/png )；
};
//文件是base64以便知道图片的原始大小。
reader.onload=函数(e) {
img . src=e . target . result；
};
elefile . addevent listener( change ，function (event) {
file=event . target . files[0]；
//选择的文件是图片
if(file . type . index of( image )==0){
reader.readAsDataURL(文件)；
}
});
注意：
移动端会有图像失真，需要根据设备的dpr放大画布，然后用css强制还原。
//获取设备dpr
getPixelRatio:函数(上下文){
let backing store=context . backingstorepixelrratio
context . webkitbackingstorepixelrratio
context . mozbackingstorepixelrratio
context . msbackingstorepixelrratio
语境。obackingstorepixelrratio
语境。backingstorepixelrratio 1；
返回(窗口。devicepixelrratio 1)/后备存储；
}
//大概这样
const CTX=这个。画布。获取上下文(“2d”)；
const DPR=这个。getpixelrratio(CTX)；
这个参考文献。postimg。交叉起源=匿名；
var旧宽度=this。画布。宽度；
var旧高度=this。画布。身高；
这个。画布。风格。width=旧宽度 px ；
这个。画布。风格。高度=旧高度 px ；
这个。画布。宽度=旧宽度* DPR；
这个。画布。身高=老身高* DPR；
ctx.scale(朝鲜、DPR)；
//进行正常的操作
ctx.drawImage(这个0.0250400美元)；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。