1

これは、これが技術的に可能かどうかを確認するための簡単なプローブです。

ブラウザで（contentEditable領域内でも）画像のサイズ変更を有効にしたいのですが。FirefoxとIEは、組み込みのハンドルを使用してこれを実行することをすでに許可しており、正常に動作します。Safariに何かを実装したいのですが、これはネイティブでサポートされていないためです。

私はjQueryのサイズ変更可能なメソッドを試してみましたが、それは非常にうまく機能しますが、画像と一緒にdivの束を挿入し、それを大きなdivでラップすることに依存しています。これは、contentEditable領域で生成されたコードに関係がなければ、通常は問題ありませんが、サーバーに保存されるためです。保存時にこの余分なものを取り除くことはできますが、私は考えていましたが、余分なdivの追加に依存しない画像のサイズ変更スクリプトを作成することは技術的に可能ですか？今のところハンドルなしで、ユーザーが画像の端に近づいたことを検出することに集中し、マウスカーソルをサイズ変更して、5pxの端の周りのクリックとドラッグを検出することにしたとしても画像、これは可能ですか？

可能であれば、おそらくそれはすでに行われていると思いますが（期待しています）、私の検索ではこれまで何も見つかりませんでした。

アイデアを聞きたがっています:)

4

1 に答える 1

1

これがおそらく何かの始まりです。これはjavascriptだけですが、jQueryに簡単に持ち込むことができます。

ご注意ください：

onmousedownとは通常、onmouseupドキュメントではなく画像上にありますが、私にはハンドルがないため、画像自体をドラッグすることになります（とにかくSafariで）。

そのため、現在のように、サイズを変更するには、画像の外側をクリックする必要があります。

img {
    width: 400px;
    height: auto;
    position: relative;
}

var positionX;
var startWidth;
var image = document.getElementById('image');
document.onmousedown = function(e) {
    if(!e) e = window.event;
    positionX = (e.clientX);
    startWidth = image.width;
    document.onmousemove = function(e) {
        if(!e) e = window.event;
        image.style.width = (startWidth + (e.clientX - positionX)) + 'px';
    }
}
document.onmouseup = function() {
    document.onmousemove = null;
    positionX = null;
    startWidth = null;
}


<img id="image" src="http://mydomain.com/myimage.jpg" />
于 2010-04-23T12:33:43.133 に答える