文档章节

百度编辑器Ueditor 多图上传出现部分照片尺寸不压缩的问题解决

创业是喝可乐
 创业是喝可乐
发布于 2017/05/04 18:01
字数 514
阅读 357
收藏 1

百度编辑器Ueditor的多图上传用的是百度自家的webuploader插件,本身这个插件上传是有图片压缩的,可能由于某种bug压缩时好时坏,经常不压缩。

这部分的代码在/editor/dialogs/image/image.js 在380行左右有这部分的代码。

其中imageCompressBorder数值是在/editor/php/congfig.json里面设置的

奇怪的时候部分图片就是不压缩,可能的确图片某些问题,例如png图片改后缀jpg这样的图片就不压缩。

问题还是要解决。

1、修改/editor/php/config.json

修改8、9行

"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 600, /* 图片压缩最长边限制 */

2、修改/editor/php/action_upload.php 在17行后面加上部分代码,增加resize、maxwidth2个参数

case 'uploadimage':
    $config = array(
        "pathFormat" => $CONFIG['imagePathFormat'],
        "maxSize" => $CONFIG['imageMaxSize'],
        "allowFiles" => $CONFIG['imageAllowFiles'],
        "resize"=> $CONFIG['imageCompressEnable'],
        "maxwidth"=> CONFIG['imageCompressBorder']
    );

3、修改/editor/php/Uploader.class.php 添加压缩方法 在upFile()方法,移动文件后面,大约在125行添加一个压缩图片的判断

//移动文件
if (!(move_uploaded_file($file["tmp_name"], $this->filePath) && file_exists($this->filePath))) { //移动失败
    $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE");
} else { //移动成功
    $this->stateInfo = $this->stateMap[0];
}
//压缩图片

if($this->config['resize']){
    $this->resize($this->filePath,$this->filePath);
}

在文档的最后面增加压缩文件的resize方法

/**
 * 压缩图片
 */
public function resize($oldfilepath,$newfilepath){
    list($owidth,$oheight)=getimagesize($oldfilepath);
    if($owidth > $this->config['maxwidth'] ){
        switch ($this->fileType)
        {
            case '.jpg':
                $nsrc = imagecreatefromjpeg($oldfilepath);
                break;
            case '.jpeg':
                $nsrc = imagecreatefromjpeg($oldfilepath);
                break;
            case '.gif':
                $nsrc = imagecreatefromgif($oldfilepath);
                break;
            case '.png':
                $nsrc = imagecreatefrompng($oldfilepath);
                break;
            default:
                //alert("上传图片格式不正确。");
        }
        $newwidth= $this->config['maxwidth'];
        $newheight=($oheight/$owidth)*$this->config['maxwidth'];
        $tmp=imagecreatetruecolor($newwidth,$newheight);
        imagecopyresampled($tmp,$nsrc,0,0,0,0,$newwidth,$newheight,$owidth,$oheight);

        //输出不同类型图片
        switch ($this->fileType)
        {
            case '.jpg':
                imagejpeg($tmp,$newfilepath,100);
                break;
            case '.jpeg':
                imagejpeg($tmp,$newfilepath,100);
                break;
            case '.gif':
                imagegif($tmp,$newfilepath);
                break;
            case '.png':
                imagepng($tmp,$newfilepath);
                break;
            default:
                //alert("上传图片格式不正确。");
        }
        imagedestroy($nsrc);
        imagedestroy($tmp);

    }
}

好啦,可以愉快的上传压缩图片了,管你是html5上传还是flash上传,单张还是多张,都可以压缩了

© 著作权归作者所有

创业是喝可乐
粉丝 6
博文 71
码字总数 8004
作品 0
德州
产品经理
私信 提问
加载中

评论(1)

SIX2FOUR
SIX2FOUR
很好,非常感谢😊
编辑器ueditor 1.4.3jsp,单图上传到图片服务器,ueditor.all.js里的iframe.contentWindow.document发生错误

我用的ueditor版本是ueditor1_4_3 jsp版本,点击编辑器里的单图上传,图片成功上传到了图片服务器上,但是图片回显不到编辑器里,提示【上传错误】,跟踪发现,是ueditor.all.js运行到下面这...

youjing
2015/12/04
1K
8
网站如何集成百度UEditor编辑器

在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一。现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是KindEdito...

it1000001001
2017/06/20
370
1
百度编辑器 多图片批量上传 顺序混乱问题 ueditor

我上一个版本用的是ueditor1.3.6,自从1.4.2版以后,“前端上传模块统一改用webuploader”,ueditor在多图上传一直考虑漏掉了图片顺序的问题。 我的网站在用户上传图片文章的时候,使用多图上...

大灰狼wow
2015/09/11
3.5K
1
PHPCMS整合百度编辑器UEditor——可能是史上最完整教程(之一)

phpcms自带富文本编辑器为ckeditor,功能不必多说,排版尤其不便;决定替换为百度UEditor。 这里phpcms版本为V9.5.9,UEditor版本为[1.4.3.3 PHP版本]——UTF-8版。其余版本大致相同,具体替...

makingdifference
2016/09/03
78
0
NKeditor v4.3.1 发布,基于 kindeditor 的在线富文本编辑器

NKeditor 4.2.1 已发布。NKedtior 是基于 kindeditor 进行二次开发的项目,kindeditor 是一款优秀的开源在线编辑器。轻量级且功能强大,代码量却不到百度的ueditor编辑器的一半。 本次更新内...

阳建
2017/09/21
1K
12

没有更多内容

加载失败,请刷新页面

加载更多

web前端性能优化

js相关 根据js时间线,将js放在最下面加载,先加载DOM,再加载js 懒执行,就是将某些逻辑延迟到使用时再执行。该技术可用于首屏优化,对于某些耗时逻辑并不需要在首屏就使用的,就可以使用懒...

祖达
16分钟前
0
0
websocket通信failed to execute 'send'问题的解决

在建立web socket通信后,发送数据时,出现下图所示现象: 问题代码演示 function TestSockets() { //实例化一个WebSocket对象 var socket = new WebSocket("ws://127.0.0.1:8000/w...

城市之雾
22分钟前
0
0
PHPStorm 如何设置 yaf 代码提示?

下载 php-yaf-doc git clone https://github.com/elad-yosifon/php-yaf-doc.git PHPStorm 如下设置 使用

whoru
23分钟前
0
0
typeorm drop foreign key

1. 问题描述 项目代码中使用typeorm进行mysql的数据操作, 昨天突然部署测试环境发现测试环境数据库的外键都为空了, 导致涉及的整个系统不可用. 2. 问题探究 尝试复现 mysqldump 线上数据, 然...

jimmywa
24分钟前
2
0
好程序员web前端开发测验之css部分

好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font size="3">  ul {</font></p> <p><font size="3">  MaRGin:......

好程序员IT
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部