# 語法 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)選擇的圖像寬高

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;  };  };

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) {    // ...   }  };  });