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

Question

我目前正在使用summernote并且有一个很好用的php文件上传器。但是，插入的图像有时可能非常大，1920x1080 或更大。

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

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

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

Answer 1

我遇到了同样的问题并通过为此创建一个插件解决了它。

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

在此处下载 Summernote 的调整大小数据图像插件。

另外还需要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>