在summernote上插入图像后调整图像大小
Posted
技术标签:
【中文标题】在summernote上插入图像后调整图像大小【英文标题】:Resizing image after insertimage on summernote 【发布时间】:2015-07-23 05:40:37 【问题描述】:我目前正在使用 Summernote,并且有一个 php 文件上传器,效果很好。但是,插入的图像有时可能非常大,1920x1080 甚至更大。
Summernote 带有一个很棒的图像“缩放”功能,我很想以编程方式触发它。 所以当我上传并插入我的图片时,它会自动缩小到给定的百分比。
我知道我可以调整图像服务器端的大小,但我会在图像上做一个灯箱,所以我想要它们的全尺寸,但按比例缩小。
有没有人做过类似的事情?
【问题讨论】:
我知道这是旧的,但为了进一步参考,我建议了一种在插入时自动调整大小的解决方案(无需用户干预)。见issue#2344 【参考方案1】:我遇到了同样的问题,并为此创建了一个插件来解决它。
它会在将图像放入 Summernote 编辑器之前自动调整大小、翻转和旋转图像。
下载 Summernote here 的 Resized Data Image Plugin。
另外你需要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>
【讨论】:
嘿,好东西!这可以满足我的需要并且可以调整:D 我刚刚再次更新了代码,现在所有转换(翻转和旋转)都能正常工作:Resized Data Image Plugin for Summernote 是否有机会更新此内容以考虑最新更改? github.com/summernote/summernote/issues/1361 我收到了summernote-ext-resized-data-image.self-41628b1……:18 Uncaught TypeError: Cannot read property 'getTemplate' of undefined
。 $.summernote.renderer
似乎是未定义的。【参考方案2】:
我使用来自的解决方案解决了这个问题 (Summernote v0.8.1 图片上传) Summernote image upload
并使用https://github.com/verot/class.upload.php 库来验证/调整图像大小
在 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();
然后在您的 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上插入图像后调整图像大小的主要内容,如果未能解决你的问题,请参考以下文章