web-dev-qa-db-ja.com

ある画像を別の画像内に移動する

背景

ユーザーがマスク画像内に画像をアップロードできるようにしています...

ユーザーが画像をアップロードしたら、次のように入力しますユーザーがアップロード内部の画像マスク画像：

1。マスク画像：

enter image description here

2。ユーザーがアップロードした画像：

enter image description here

3 .ユーザーがマスクにアップロードした画像 [最終画像]：

enter image description here

Codepen： https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle： http://jsfiddle.net/2xq8p0zy/

Html

<body>
  <img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>

css

body {
  background-color: #111;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 500px;
  -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
  mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

要件：

ユーザーがアップロードした画像をマスク画像内に移動するこのフィドルのようにオプションを提供したい：

http://jsfiddle.net/aLcb4sb5/ または リンク

問題：

しかし、現在 ウェブサイト 両方の画像が動いています..。

htmlcsscss-mask
13
user8444404

このリンクをチェックしてください、あなたを助けるかもしれません。あなたが欲しいものは「クリッピングマスク」と呼ばれています。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths

編集：ここにいくつかの魔法があります。どういたしまして！

Codepen:https://codepen.io/anon/pen/zeZMLz

1
Chris

アップロードした画像をdivの背景画像として使用し、移動ドラッグに従って背景位置を移動しました。初期位置は「0px0px」に設定されています。純粋なJSで記述されているため、ドラッグを処理するJSライブラリを使用する場合は、おそらく短くすることができます。

<div id="draggable" draggable="true" style="background-position: 0px 0px;"></div>

ここの例

1
Itay Gal

画像はドラッグ可能である必要があるため、最初に、ドラッグオーバーイベントをリッスンし、画像自体のドラッグスタートイベントをリッスンするラッパーとしてのコンテナが必要です。したがって、ドラッグ距離を計算して、css変換として適用できます。確認してください次のペンはあなたからフォークして変更を適用しますまた、オンホイールイベントをリッスンし、画像のズームインとズームアウトを適用します。同じ方法で

水平方向に反転、垂直方向に反転、画像の回転を適用することをお勧めします

enter code here

https://codepen.io/anon/pen/yZVPrp

1
mina alfy