Resizing image after insertimage on summernote

Question

I am currently using summernote and have a php fileuploader for it that works great. However, the images inserted can sometimes be really large, 1920x1080 and larger.

Summernote comes with a great "scale" function for images, and i would love to programmatically trigger it. So when i upload and insert my image it would automatically be scaled down to a given percentage.

I know i can resize the image serverside, but im gonna do a lightbox on the images so i want them in their full size, but scaled down.

Has anyone done something similar?

Answer 1

I faced the same problem and solved it by creating a plugin for that.

It automatically resizes, flips and rotates images before putting them into the summernote editor.

Download the Resized Data Image Plugin for Summernote here.

In addition you need Exif.js to read the EXIF data of images.

Also add this CSS Code to your page to make the input[type=file] button as an 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 the plugin resizedDataImage to your summernote toolbar.

The final setup of your page could look like 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>

Answer 2

I fixed this issue using solutions from (Image Upload for Summernote v0.8.1) Summernote image upload

And using https://github.com/verot/class.upload.php library to verify/resize images

Instead of using the php file in Image for summernote v0.8.1 use this:

require_once("pathtoclassfile/src/class.upload.php");
if(!empty($_FILES['image'])){
    $handle = new upload($_FILES['image']);

if ($handle->uploaded) {
    $handle->allowed = array('image/*');
    $handle->mime_check = true; //this is set to true by default
    $handle->no_script = true;  //this is set to true by default
    $handle->forbidden = array('application/*','audio/*','multipart/*','text/*','video/*');
    $name = md5(uniqid()); //generate a new random name for your file
    $handle->file_new_name_body   = $name; 
    $handle->file_auto_rename = true;
    $handle->image_resize         = true;
    $handle->image_x              = 350;  //resize the image to what you want
    $handle->image_ratio_y        = true;
    $handle->image_convert = 'jpg';   //I converted to jpg so that all my extensions are jpg
    $handle->jpeg_quality = 50;   //you can adjust the image quality to resize further
    $handle->process('uploads'); //set the upload path
  if ($handle->processed) {

    $imagename = "$name.jpg"; //attach the extenstion to the file name
    $baseurl = $_SERVER['HTTP_HOST']; //your server host or use "example.com/";
    echo $baseurl.'uploads/summernote/'.$imagename;

    $handle->clean();
      }
}
}

Then in your javascript change success function to:

success: function(url) {
            if(url !== ''){
            var image = $('<img>').attr('src', 'http://' + url);
            $('#summernote').summernote("insertNode", image[0]);
            }else{
                alert('File is not an image!\nOnly jpg, png, jpeg and gif are allowed');
            }
        },

Get the rest of the codes from the links I posted above.