Question

我目前正在使用summernote并且有一个php fileuploader，它运行良好。但是，插入的图像有时可能非常大，1920x1080甚至更大。

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

我知道我可以重新调整图像服务器的大小，但是我会在图像上做一个灯箱，所以我想要它们的全尺寸，但是按比例缩小。

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

Answer 1

我遇到了同样的问题，并通过为其创建插件解决了这个问题。

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

下载Summernote here的调整大小的数据图像插件。

此外，您需要Exif.js才能阅读图片的EXIF数据。

同时将此CSS代码添加到您的页面，将input[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;
}

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

您网页的最终设置可能如下所示：

<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

我使用以下方法解决了此问题：（Summernote v0.8.1的图片上传） Summernote image upload

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

代替在Image中使用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();
      }
}
}

然后在您的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');
            }
        },

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

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

2 个答案: