這篇文章主要介紹了vue 實現剪裁圖片並上傳伺服器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
預覽鏈接點擊預覽
效果圖如下圖所示，大家感覺不錯，請參考實現程式碼。
需求
實作步驟
methods:funName() - 對應原始碼中methods中的funName方法
data:dataName - 對應原始碼中data中的dataName資料
1. 圖片選擇與讀取
#2. 在canvas中展示圖片
需要掌握的canvas相關知識:
清空畫布ctx.clearRect(x,y,width,height) ;
填滿矩形ctx.fillRect(x, y,width,height) ;
繪製圓弧ctx.arc(x,y,r,startAngle,endAngle,counterclockwise) ; 繪製矩形ctx.rect(x,y,width ,height);
繪製圖像drawImage
# 语法
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
# 参数
image # 绘制的元素（可以为HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。）
dx,dy # 目标画布(destination canvas)左上角的坐标
dWidth,dHeight # 目标画布(destination canvas)上绘制图像宽高
sx,sy # 源画布(source canvase)左上角的坐标
sWidth,sHeight # 源画布(source canvase)选择的图像宽高
登入後複製
#5.剪裁圖片ctx.clip() ;
##計算canvas寬高：(methods:calcCropperSize) 根據圖片大小，計算canvas寬高（data:cropperCanvasSize），以致圖片能夠在裁剪區域自適應展示，並確定裁剪的左上角位置（data:cropperLocation）。
繪製左側裁切區域影像：(methods:renderCropperImg)
裁切區域vue data示意圖：
#
繪製右側預覽圖片：(methods:renderPreviewImg)
3. 移動裁切框
知識點: onmousedown、onmousemove、onmouseup
#具體實作:
methods:drag()
- #記錄滑鼠座標，滑鼠移動根據偏移量計算圓心位置。
canvas.onmousedown = e => {
let [lastX, lastY] = [e.offsetX, e.offsetY];
self.movement = true;
canvas.onmousemove = e => {
self.circleCenter = {
X:
self.cropperCanvasSize.width > 2 * self.slectRadius
? self.circleCenter.X + (e.offsetX - lastX)
: self.cropperCanvasSize.width / 2,
Y:
self.cropperCanvasSize.height > 2 * self.slectRadius
? self.circleCenter.Y + (e.offsetY - lastY)
: self.cropperCanvasSize.height / 2
};
self.renderCropperImg();
[lastX, lastY] = [e.offsetX, e.offsetY];
};
canvas.onmouseup = e => {
self.movement = false;
canvas.onmousemove = null;
canvas.onmouseup = null;
};
};登入後複製
4. 上傳圖片至伺服器
知識點:
FormData 物件的使用
canvas.toBlob() ;
Convert Data URI to File then append to FormData
具體實作:
methods:upload()
this.$refs.preview.toBlob((blob)=> {
const url = URL.createObjectURL(blob);
const formData = new FormData();
formData.append(this.uploadProps.name, blob, `${Date.now()}.png`);
if(this.data){
Object.keys(this.uploadProps.data).forEach(key => {
formData.append(key, this.uploadProps.data[key]);
});
}
const request = new XMLHttpRequest();
request.open("POST", this.uploadProps.action, true);
request.send(formData);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
// ...
}
};
});登入後複製
######以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########關於vux uploader 圖片上傳元件的安裝使用方法###############Vue多種方法實作表頭和首列固定的方法###########################
以上是vue 實作剪裁圖片並上傳伺服器的功能介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
