jquery - Resizing image after insertimage on summernote -

i using summernote , have php fileuploader works great. however, images inserted can large, 1920x1080 , larger.

summernote comes great "scale" function images, , love programmatically trigger it. when upload , insert image automatically scaled down given percentage.

i know can resize image serverside, im gonna lightbox on images want them in full size, scaled down.

has done similar?

i faced same problem , solved creating plugin that.

it automatically resizes, flips , rotates images before putting them summernote editor.

download resized data image plugin summernote here.

in addition need exif.js read exif data of images.

also add css code page make input[type=file] button icon button:

button[data-name=resizeddataimage] {     position: relative;     overflow: hidden; }  button[data-name=resizeddataimage] input {     position: absolute;     top: 0;     right: 0;     margin: 0;     opacity: 0;     font-size: 200px;     max-width: 100%;     -ms-filter: 'alpha(opacity=0)';     direction: ltr;     cursor: pointer; } 

finally add plugin resizeddataimage summernote toolbar.

the final setup of page this:

<link rel="stylesheet" type="text/css" href="design/css/summernote.min.css"> <script type="text/javascript" src="js/exif.js"></script> <script type="text/javascript" src="js/summernote.min.js"></script> <script type="text/javascript" src="js/summernote-ext-resized-data-image.js"></script>   <style type="text/css">     button[data-name=resizeddataimage]  {         position: relative;         overflow: hidden;     }      button[data-name=resizeddataimage] input {         position: absolute;         top: 0;         right: 0;         margin: 0;         opacity: 0;         font-size: 200px;         max-width: 100%;         -ms-filter: 'alpha(opacity=0)';         direction: ltr;         cursor: pointer;     } </style>  <script type="text/javascript">     $(function () {         $('.summernote').summernote({             height: 250,             toolbar: [                 ['insert', ['resizeddataimage', 'link']]             ]         });     }); </script>