jpg file, drag&drop, change brightness, scaling (image_dd1)

imgタグ領域に Drag&Drop した画像が表示される。
imgタグに width=300 を記載してある。==> 記載しない場合の例
scaleは中央を１として、(値/50)**2 で拡大/縮小を行なう

opacity value.

scale.

Todo and References:

Edge20, IE11, safari517 は drap-drop ができない 最初に reset を押すと画像が表示されなくなる DONE : reload 時に range bar を初期化. (2015/5/1) DONE : 最初のサイズを覚えておいて、その値からの倍率にする (2015/4/2) DONE : Drag and drop a image - HTML5 Webアプリケーションプログラミング入門 (Chapter4), 掌田津耶乃, 978-4-7980-3403-4 (2012/6/28) - With the original description of style="width:300px; height:250px;" in img-tag, scaling of the image does not work well. See below in detail. DONE : Change brightness. http://www.htmq.com/css3/opacity.shtml DONE : Change size. http://javascript.eweb-design.com/0810_isc.html 却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2)
最初に reset を押すと画像が表示されなくなる DONE : reload 時に range bar を初期化. (2015/5/1) DONE : 最初のサイズを覚えておいて、その値からの倍率にする (2015/4/2) DONE : Drag and drop a image - HTML5 Webアプリケーションプログラミング入門 (Chapter4), 掌田津耶乃, 978-4-7980-3403-4 (2012/6/28) - With the original description of style="width:300px; height:250px;" in img-tag, scaling of the image does not work well. See below in detail. DONE : Change brightness. http://www.htmq.com/css3/opacity.shtml DONE : Change size. http://javascript.eweb-design.com/0810_isc.html 却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2)
DONE : reload 時に range bar を初期化. (2015/5/1) DONE : 最初のサイズを覚えておいて、その値からの倍率にする (2015/4/2) DONE : Drag and drop a image - HTML5 Webアプリケーションプログラミング入門 (Chapter4), 掌田津耶乃, 978-4-7980-3403-4 (2012/6/28) - With the original description of style="width:300px; height:250px;" in img-tag, scaling of the image does not work well. See below in detail. DONE : Change brightness. http://www.htmq.com/css3/opacity.shtml DONE : Change size. http://javascript.eweb-design.com/0810_isc.html 却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2)
DONE : 最初のサイズを覚えておいて、その値からの倍率にする (2015/4/2) DONE : Drag and drop a image - HTML5 Webアプリケーションプログラミング入門 (Chapter4), 掌田津耶乃, 978-4-7980-3403-4 (2012/6/28) - With the original description of style="width:300px; height:250px;" in img-tag, scaling of the image does not work well. See below in detail. DONE : Change brightness. http://www.htmq.com/css3/opacity.shtml DONE : Change size. http://javascript.eweb-design.com/0810_isc.html 却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2)
DONE : Drag and drop a image - HTML5 Webアプリケーションプログラミング入門 (Chapter4), 掌田津耶乃, 978-4-7980-3403-4 (2012/6/28) - With the original description of style="width:300px; height:250px;" in img-tag, scaling of the image does not work well. See below in detail. DONE : Change brightness. http://www.htmq.com/css3/opacity.shtml DONE : Change size. http://javascript.eweb-design.com/0810_isc.html 却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2): - HTML5 Webアプリケーションプログラミング入門 (Chapter4), 掌田津耶乃, 978-4-7980-3403-4 (2012/6/28)
- With the original description of style="width:300px; height:250px;" in img-tag, scaling of the image does not work well. See below in detail.
DONE : Change brightness. http://www.htmq.com/css3/opacity.shtml DONE : Change size. http://javascript.eweb-design.com/0810_isc.html 却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2): http://www.htmq.com/css3/opacity.shtml
DONE : Change size. http://javascript.eweb-design.com/0810_isc.html 却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2): http://javascript.eweb-design.com/0810_isc.html
却下 : 拡大と縮小とで range bar を分けたほうが良さそう (2015/4/2)

Comment

About "style=" in img-tag
- style="width:300px;" scales with the value.
- style="width:300px; height:250px;" fixes the ratio and deformed.
- style="height:250px;" ffox scales with the value. crome not displays img area.
- Without style= ffox displays with the original size. crome not displays img area.
Without ondragover() function, a new page with a jpeg file will be displayed.
style の .droped の中に width: 500px; があると、大きさ変更の JS で width を変えられない

Last update 2015/4/3