在summernote上的insertimage之后调整图像大小

哈维哈维

我目前正在使用summernote,并具有适用于它的php fileuploader,效果很好。但是,插入的图像有时可能真的很大,为1920x1080或更大。

Summernote具有出色的图像“缩放”功能,我很想以编程方式触发它。因此,当我上传并插入我的图片时,它会自动缩小到给定的百分比。

我知道我可以调整图像服务器端的大小,但是我要在图像上做一个灯箱,以便我希望它们具有完整的尺寸,但是要缩小。

有人做过类似的事情吗?

拉斐尔

我遇到了同样的问题,并为此创建了一个插件来解决了这个问题。

在将图像放入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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何在Mac OSX上使用终端调整图像大小?

来自分类Dev

Codeigniter图像调整大小?

来自分类Dev

图像上的DrawText,文字调整为图像的大小

来自分类Dev

调整悬停在图像上的所有内容的大小?

来自分类Dev

调整Java图像大小

来自分类Dev

停止调整图像大小

来自分类Dev

在调整大小时在主体上滚动背景图像

来自分类Dev

调整画布图像的大小

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

Boostrap:调整大小时如何在图像上“粘贴”按钮

来自分类Dev

快速调整图像大小

来自分类Dev

调整Vaadin图像大小

来自分类Dev

Summernote删除调整大小栏

来自分类Dev

在OSX上通过拖放来调整图像大小

来自分类Dev

Codeigniter图像调整大小?

来自分类Dev

覆盖图像上的链接,可调整图像大小

来自分类Dev

在show方法中使用Rails上的ruby调整图像大小

来自分类Dev

jQuery:在调整大小的图像上冒烟

来自分类Dev

调整图像大小

来自分类Dev

图像调整大小的错误

来自分类Dev

Colorbox上的jQuery图像调整大小

来自分类Dev

如何在图像上响应性地调整div大小?

来自分类Dev

调整画布图像的大小

来自分类Dev

调整XXHDPI的图像大小

来自分类Dev

在浏览器大小上按行调整图像大小

来自分类Dev

在按钮上使用Jquery调整SVG图像的大小

来自分类Dev

在不使用jquery调整大小的图像上缩放SVG

来自分类Dev

调整图像大小的问题

来自分类Dev

Python 调整图像大小