ContentEditable image resize w chrome, jakie jest najlepsze rozwiązanie?

Question

Próbuję zintegrować zmianę rozmiaru obrazu za pomocą contentEditable w przeglądarce Chrome. Wiem, że są problemy z webkitem dotyczące normalnego działania tej funkcji, więc zastanawiałem się, jaka jest najlepsza alternatywna metoda integracji zmiany rozmiaru obrazu w przypadku, gdy użytkownik korzysta z Google Chrome (wtyczki jQuery? Metody Javascript?).

<div contenteditable> 
 
    <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width=200 /> 
 
</div>

Oto jak to działa out-of-the-box z Firefoksem:

Answer 1

wyboru są następujące opcje:

1. użyć biblioteka. Zdecydowanie istnieją: YUI ma na przykład image resize module. Nigdy go nie używałem, ale wersja demonstracyjna działa we wszystkich przeglądarkach komputerowych, które wypróbowałem.

2. Napisz własną: dodaj elementy, które można przeciągnąć, aby uchwyty zmiany rozmiaru. Zrobiłem to już wcześniej i nie jest to zbyt trudne, jeśli wiesz, co robisz.

Answer 2

@ Tim-Down Odpowiedź jest prawdopodobnie lepszym rozwiązaniem. Ale chcę wyrzucić tam, że można zmienić rozmiar zdjęć tylko z CSS, jeśli nie chcesz nic robić dalej z nim:

http://codepen.io/anon/pen/JEEKqO

resize: both; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg); 

body { 
 
    background-color: #1D1F1F; 
 
} 
 

 
section { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
div { 
 
    resize: both; 
 
    background-color: white; 
 
    overflow: scroll; 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
}

<section> 
 
    <button>both</button> 
 
    <button>horizontal</button> 
 
    <button>vertical</button> 
 
    <button>none</button> 
 
<div class="resize"></div> 
 
</section>