Vueは画像を切り取ってサーバーにアップロードする機能を実装しています-jsチュートリアル-php.cn

Vueは画像を切り取ってサーバーにアップロードする機能を実装しています

不言

リリース： 2018-06-29 14:52:49

オリジナル

2249 人が閲覧しました

この記事では、主にvueで画像をトリミングしてサーバーにアップロードする機能を紹介します。非常に優れており、必要な友達は参考にしてください

プレビューするには、プレビューリンクをクリックしてください

。以下のようになりますので、ぜひ参考にしてコードを実装してください。

要件

[x]プレビュー:選択した画像サイズに従って左側のトリミング領域を適応的に塗りつぶします
[x]トリミング:右側のプレビュー領域を移動しますリアルタイムプレビュー用のトリミングボックス
[x] アップロードとクリア: 確認をクリックしてトリミングされた画像をアップロードし、キャンセルボタンをクリックして画像をクリアします
[ ] トリミングフレームのサイズは変更できます

実装手順

methods: funName( ) - ソースコードのメソッドの funName メソッドに対応します

data:dataName - ソースコードの data の dataName データに対応します

1。画像の選択と読み取り

画像を選択します: (methods:selectPic) input[type="file"] を使用すると画像選択ボックスがポップアップし、js がクリックイベントをアクティブにトリガーします
画像を読み取ります。 (methods:readImage) 画像オブジェクトを作成し、createObjectURL を使用して画像を表示します。 objectURL = URL.createObjectURL(blob) ;

2. キャンバスに画像を表示します

キャンバス関連の知識が必要です:

キャンバスをクリアします 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() ;

具体的な手順:

キャンバスの幅と高さを計算します: (methods:calcCropperSize) 画像がトリミング領域に適応的に表示できるように、画像サイズに基づいてキャンバスの幅と高さ (data:cropperCanvasSize) を計算し、左上を決定しますトリミングのコーナー位置 (data:cropperLocation) 。
左側のトリミング領域の画像を描画: (methods:renderCropperImg)

トリミング領域の Vue データ図:

右側のプレビュー画像を描画: (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() ;
データ URI を次のように変換します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 に注目してください。中国語のサイトです！