在summernote上插入图像后调整图像大小

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并且有一个php fileuploader,它工作得很好。但是,插入的图像有时可能非常大,1920x1080甚至更大。

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.

Summernote为图像提供了一个很棒的“缩放”功能,我很乐意以编程方式触发它。因此,当我上传并插入我的图像时,它会自动缩小到给定的百分比。

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?

有没有人做过类似的事情?

2 个解决方案

#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.

它会在将图像放入summernote编辑器之前自动调整大小,翻转和旋转图像。

Download the Resized Data Image Plugin for Summernote here.

在此处下载Summernote的Resized Data Image插件。

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

此外,您需要Exif.js来读取图像的EXIF数据。

Also add this CSS Code to your page to make the input[type=file] button as an icon button:

同时将此CSS代码添加到您的页面,以将输入[type = file]按钮作为图标按钮:

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.

最后将插件resizedDataImage添加到summernote工具栏。

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>

#2

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

我使用(夏令营v0.8.1的图像上传)Summernote图像上传解决方案解决了这个问题

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

并使用https://github.com/verot/class.upload.php库来验证/调整图像大小

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

不使用Image for summernote v0.8.1中的php文件,而是使用:

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:

然后在你的javascript更改成功函数中:

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.

从我上面发布的链接中获取其余代码。

#1