/    Sign up×
Community /Pin to ProfileBookmark

Resize uploaded image for linecontrol editor

Hello,

I’m using the http://suyati.github.io/line-control editor
This editor does not upload images to the folder, inserts them into text as base64
I want to resize image upload to this editor
I have a resizing code **imageresize.php**

This image insert code:

“`
‘insert_img’ : { “modal”: true,
“modalId”: “InsertImage_” + $(this).attr(“id”),
“icon”:”fa fa-picture-o”,
“tooltip”: “Insert Image”,
“modalHeader”: “Insert Image”,
“modalBody”: methods.imageWidget.apply(this),
“beforeLoad”:function(){
editorObj = this;
var _idSuffix = editorObj.attr(“id”);
$(‘#imageURL_’ + _idSuffix).val(“”);
$(“#uploadImageBar_” + _idSuffix + ” :input”).val(“”);
$(‘#imageList_’ + _idSuffix).data(‘current’,””);
},
“onSave”: function(){
var _idSuffix = “_” + editorObj.attr(“id”);
methods.restoreSelection.apply(this);
if($(‘#imageList’ + _idSuffix).data(‘current’)){
if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Windows NT.*Trident//)){
var imageStr = ‘<img src=”‘+$(‘#imageList’ + _idSuffix).data(‘current’)+'”/>’
methods.restoreSelection.apply(this,[imageStr,’html’])
}
else{
document.execCommand(‘insertimage’, false, $(‘#imageList’ + _idSuffix).data(‘current’));
}
}
else{
methods.showMessage.apply(this,[“imgErrMsg” + _idSuffix,”Please select an image”]);
return false;
}
$(“#InsertImage” + _idSuffix).modal(“hide”);
$(this).data(“editor”).focus();
}},
“`

How can I redirect to resize here?

“`
$.ajax({
type: “POST”,
url: “imageresize.php”,
success: function(msg){
}
});
“`

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJun 27.2020 — I do not understand this completely:
This editor does not upload images to the folder, inserts them into text as base64

I want to resize image upload to this editor[/quote]
Do you intend to resize the images before inserting the base64 into the text?

Or do you want to upload them to the server and resize them over there by use of the PHP script you mentioned?Or do you intend to upload them only for the purpose of resizing and afterwards download it and insert it into the text?
Copy linkTweet thisAlerts:
@gecekuleauthorJun 27.2020 — @Sempervivum#1620003

Do you intend to resize the images before inserting the base64 into the text?

YES, I want to resize while uploading image
Copy linkTweet thisAlerts:
@SempervivumJun 27.2020 — Still don't understand. Please describe step by step what you intend to do.

An image can be resized clientside too. Would this help you?
Copy linkTweet thisAlerts:
@gecekuleauthorJun 27.2020 — I use this editor: https://www.jqueryscript.net/demo/Responsive-WYSIWYG-Text-Editor-with-jQuery-Bootstrap-LineControl-Editor/

I want to resize the image before uploading
Copy linkTweet thisAlerts:
@SempervivumJun 27.2020 — How to determine the dimensions for resizing? Should the image fit in the editor's window? Or should the user resize it manually by dragging the corners?
Copy linkTweet thisAlerts:
@gecekuleauthorJun 27.2020 — I want to set a standard in the code

Width: 260px

Height: 113px

I use the editor in PHP
Copy linkTweet thisAlerts:
@SempervivumJun 27.2020 — Note that the user might insert an image that has a different aspect ratio.
Copy linkTweet thisAlerts:
@gecekuleauthorJun 27.2020 — I have my resizing PHP code, does not stretch the pictures

``<i>
</i>
function boyutla($resim, $tresim, $max_en, $max_boy){

$arraylar = explode('.',$resim);
$sonuc = $arraylar[(count($arraylar) -1)];
$sonuc = trim($sonuc);
$sonuc = strtolower($sonuc);


switch ($sonuc){
case "jpeg": $islem=imagecreatefromjpeg($resim); break;
case "JPEG": $islem=imagecreatefromjpeg($resim); break;
case "jpg": $islem=imagecreatefromjpeg($resim); break;
case "gif": $islem=imagecreatefromgif($resim); break;
case "png": $islem=imagecreatefrompng($resim); break;
case "JPG": $islem=imagecreatefromjpeg($resim); break;
case "GIF": $islem=imagecreatefromgif($resim); break;
case "PNG": $islem=imagecreatefrompng($resim); break;
}

$boyut = getimagesize($resim);
$en = $boyut[0];
$boy = $boyut[1];

$x_oran = $max_en / $en;
$y_oran = $max_boy / $boy;

if (($en <= $max_en) and ($boy <= $max_boy)){
$son_en = $en;
$son_boy = $boy;
}
else if (($x_oran * $boy) < $max_boy){
$son_en = $max_en;
$son_boy = ceil($x_oran * $boy);
}
else {
$son_en = ceil($y_oran * $en);
$son_boy = $max_boy;
}

$yeni = ImageCreateTrueColor($son_en,$son_boy);
imagealphablending($yeni, false);
imagesavealpha($yeni, true);
$transparent = imagecolorallocatealpha($yeni, $son_en, $son_boy, $en, $boy);
imagefilledrectangle($yeni, 0, 0, $son_en, $son_boy, $transparent);
imagecopyresampled($yeni,$islem,0,0,0,0,$son_en,$son_boy,$en,$boy);

switch ($sonuc){
case "jpeg": imagejpeg($yeni,$tresim); break;
case "JPEG": imagejpeg($yeni,$tresim); break;
case "jpg": imagejpeg($yeni,$tresim); break;
case "gif": imagegif($yeni,$tresim); break;
case "png": imagepng($yeni,$tresim); break;
case "JPG": imagejpeg($yeni,$tresim); break;
case "GIF": imagegif($yeni,$tresim); break;
case "PNG": imagepng($yeni,$tresim); break;
}
return $resim;
}
$izin_ver_array = array("gif", "jpg", "png", "jpeg", "GIF", "JPG", "PNG", "JPEG");<i>
</i>
``
×

Success!

Help @gecekule spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...