As per my requirements, I have made a code to upload an image and given the various effects to the image.
So please follow the below steps to achieve the functionality.
Step1: Add below code in your .phtml file where you want to upload an image.
<div class="container wallpapercustompage">
<div class="row">
<div class="col-lg-8">
<div class="mainImage">
<img src="<?php echo $this->getUrl(); ?>10221276943_45e198c6c6_4k.jpg" id="mainImageSrc" />
</div>
<div class="actions-save" style="display:none;">
<button type="button" class="action-cancel" data-role="cancel-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Cancel'); ?>"><span><?php echo __('Cancel'); ?></span></button>
<button type="button" class="action-apply" data-role="apply-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Apply'); ?>"><span><?php echo __('Apply'); ?></span></button>
</div>
<div class="actions">
<button type="button" class="action-flip" data-role="flip-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Flip image'); ?>"><span><?php echo __('Flip image'); ?></span></button>
<button type="button" class="action-bw" data-role="bw-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Black & White Filter'); ?>"><span><?php echo __('Black & White Filter'); ?></span></button>
<button type="button" class="action-sepia" data-role="sepia-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Sepia Filter'); ?>"><span><?php echo __('Sepia Filter'); ?></span></button>
</div>
</div>
<div class="col-lg-4">
<form class="form-horizontal" id="frm_attachment" name="frm_attachment" method="post" enctype="multipart/form-data" action="<?php echo $this->getUrl(); ?>wallpaper/index/customize">
<div class="browse-wrap">
<input accept="image/*" id="attachment" name="attachment" type="file" value="">
</div>
<div class="row">
<button type="submit" id="uploadAttachment" class="btn btn-primary"><?php echo __('Submit'); ?></button>
</div>
</form>
<div id="attachmentFiles"></div>
</div>
</div>
</div>
<style type="text/css">
.mainImage-image-grayscale{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }
.mainImage-image-sepia{ -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); }
.mainImage-image-flip{ transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -khtml-transform: scale(-1, 1); -ms-transform: scale(-1, 1); }
</style>
<script>
function getSizeInCM (sizeInPX) {
return sizeInPX * 2.54 / (96 * window.devicePixelRatio)
};
require(['jquery'], function ($) {
$(document).ready(function ($) {
/**** Delete Image & Image Effects ****/
$(document).on('click', '#attachmentFiles .action-remove', function(){
if (window.confirm("Are you sure you want to delete?")) {
var attachmentPath = $(this).attr("data-image");
var divID = $(this).parents(".base-image").attr("id");
var imageID = $(this).parents(".base-image").find(".hiddneattachID").val();
jQuery.ajax({
url: "<?php echo $this->getUrl(); ?>wallpaper/index/deleteCustomize?isAjax=true",
type: "POST",
data: {filename: attachmentPath, form_key: window.FORM_KEY, imageID:imageID},
showLoader: true,
success: function (response) {
if(response.success == true){
var parentElements = $(".base-image#"+divID).prev().children();
$(".base-image#"+divID).remove();
if($(".base-image").length > 0)
{
$('#mainImageSrc').attr("src",parentElements.find('.wallpaper-image').attr('src'));
parentElements.find('.selectImage').attr('checked','checked');
var srcFilename = parentElements.find('.selectImage').attr('data-srcfilename');
var srcType = parentElements.find('.selectImage').attr('data-srctype');
$('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);
}
else
{
$('#mainImageSrc').attr("src", "<?php echo $this->getUrl(); ?>10221276943_45e198c6c6_4k.jpg");
var srcFilename = '10221276943_45e198c6c6_4k.jpg';
var srcType = 'jpg';
$('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);
}
}
},
error: function (response) {
alert(response.message);
}
});
}
});
$(document).on('click', '.action-bw', function(){
var attachmentPath = $(this).attr("data-image");
$('.mainImage').addClass('mainImage-image-grayscale');
$('div.actions').hide();
$('div.actions-save').show();
$('.action-apply').attr('data-action', '1');
});
$(document).on('click', '.action-sepia', function(){
var attachmentPath = $(this).attr("data-image");
$('.mainImage').addClass('mainImage-image-sepia');
$('div.actions').hide();
$('div.actions-save').show();
$('.action-apply').attr('data-action', '2');
});
$(document).on('click', '.action-flip', function(){
var attachmentPath = $(this).attr("data-image");
$('.mainImage').addClass('mainImage-image-flip');
$('div.actions').hide();
$('div.actions-save').show();
$('.action-apply').attr('data-action', '3');
});
$(document).on('click', '.action-cancel', function(){
var attachmentPath = $(this).attr("data-image");
$('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');
$('div.actions').show();
$('div.actions-save').hide();
$('.action-apply').removeAttr('data-action');
});
$(document).on('change', "input[name='selectImage']", function(){
var srcPath = $(this).attr("data-src");
var srcType = $(this).attr("data-srctype");
var srcFilename = $(this).attr("data-srcfilename")
$('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);
$('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);
$('#mainImageSrc').attr("src", srcPath);
});
$(document).on('click', '.action-apply', function(){
var imageName = $(this).attr("data-image");
var imageType = $(this).attr("data-type");
var imageAction = $(this).attr("data-action");
jQuery.ajax({
url: "<?php echo $this->getUrl(); ?>wallpaper/index/imageCustomize?isAjax=true",
type: "POST",
data: {filename: imageName, fileType:imageType, fileAction:imageAction},
showLoader: true,
success: function (response) {
if(response.error == false)
{
$('.action-bw').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-sepia').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-flip').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-cancel').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-apply').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');
$('div.actions').show();
$('div.actions-save').hide();
$('.action-apply').removeAttr('data-action');
$("#attachmentFiles").append(response.data.html);
$('#mainImageSrc').attr("src", response.data.path);
// Create dummy image to get real width and height
$("<img>").attr("src", response.data.path).load(function(){
var realWidth = this.width;
var realHeight = this.height;
var width = getSizeInCM(realWidth);
var height = getSizeInCM(realHeight);
/*alert("Original width=" + width + ", " + "Original height=" + height);*/
});
}
else
{
$('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');
$('div.actions').hide();
$('div.actions-save').show();
alert(response.message);
}
},
error: function (response) {
alert(response.message);
}
});
});
/**** Upload Image ****/
$('#uploadAttachment').click(function(e){e.preventDefault(); $('#attachment').trigger('click'); });
$("#attachment").change(function(){
var data = $("#frm_attachment").get(0);
jQuery.ajax({
url: "<?php echo $this->getUrl(); ?>wallpaper/index/addCustomize?isAjax=true' ?>",
type: "POST",
data: new FormData(data),
processData: false,
contentType: false,
showLoader: true,
success: function (response) {
if(response.error == false)
{
$('.action-bw').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-sepia').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-flip').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-cancel').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('.action-apply').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
$('div.actions').show();
$("#attachmentFiles").append(response.data.html);
$('#mainImageSrc').attr("src", response.data.path);
$('#frm_attachment')[0].reset();
// Create dummy image to get real width and height
$("<img>").attr("src", response.data.path).load(function(){
var realWidth = this.width;
var realHeight = this.height;
var width = getSizeInCM(realWidth);
var height = getSizeInCM(realHeight);
/*alert("Original width=" + width + ", " + "Original height=" + height);*/
});
}
else
{
alert(response.message);
$('#frm_attachment')[0].reset();
}
},
error: function (response) {
alert(response.message);
$('#frm_attachment')[0].reset();
}
});
});
});
});
</script>Step2: Create one “AddCustomize.php” file to upload an image.
<?php
namespace MagemonkeysWallpaperControllerIndex;
use MagentoFrameworkJsonHelperData as JsonHelper;
class AddCustomize extends MagentoFrameworkAppActionAction
{
protected $_pageFactory;
protected $connection;
protected $_mediaDirectory;
protected $_fileUploaderFactory;
public $_storeManager;
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkAppResourceConnection $connection,
JsonHelper $jsonHelper,
MagentoFrameworkControllerResultJsonFactory $resultJsonFactory,
MagentoFrameworkFilesystem $filesystem,
MagentoMediaStorageModelFileUploaderFactory $fileUploaderFactory,
MagentoStoreModelStoreManagerInterface $storeManager,
MagentoFrameworkViewResultPageFactory $pageFactory)
{
$this->_pageFactory = $pageFactory;
$this->connection = $connection;
$this->jsonHelper = $jsonHelper;
$this->resultJsonFactory = $resultJsonFactory;
$this->_mediaDirectory = $filesystem->getDirectoryWrite(MagentoFrameworkAppFilesystemDirectoryList::MEDIA);
$this->_fileUploaderFactory = $fileUploaderFactory;
$this->_storeManager = $storeManager;
return parent::__construct($context);
}
public function execute(){
$_postData = $this->getRequest()->getPost();
$message = "";
$newFileName = "";
$error = false;
$data = array();
try{
$target = $this->_mediaDirectory->getAbsolutePath('wallpaper/');
//attachment is the input file name posted from your form
$uploader = $this->_fileUploaderFactory->create(['fileId' => 'attachment']);
$_fileType = $uploader->getFileExtension();
$uniqid = uniqid();
$newFileName = $uniqid .'.'. $_fileType;
/** Allowed extension types */
$uploader->setAllowedExtensions(['jpg', 'jpeg', 'png']);
/** rename file name if already exists */
$uploader->setAllowRenameFiles(true);
$result = $uploader->save($target, $newFileName); //Use this if you want to change your file name
//$result = $uploader->save($target);
if ($result['file']) {
$_mediaUrl = $this->_storeManager->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA);
$_src = $_mediaUrl.'wallpaper/'.$newFileName;
$error = false;
$message = __("File has been successfully uploaded");
$html = '<div class="image item base-image" data-role="image" id="'. $uniqid .'">
<div class="wallpaper-image-wrapper">
<div class="radioContainer">
<input data-src="'.$_src.'" data-srctype="'. $_fileType .'" data-srcfilename="'. $newFileName .'" checked="checked" class="selectImage selectImage-'. $uniqid .'" type="radio" name="selectImage" value="'. $uniqid .'" />
</div>
<div class="imageContainer">
<img class="wallpaper-image" data-role="image-element" src="'.$_src.'" alt="">
</div>
<div class="delete-action">
<button type="button" class="action-remove" data-role="delete-button" data-image="'.$newFileName.'" title="'. __('Delete image') .'"><span>'. __('Delete image') .'</span></button>
</div>
</div>
</div>';
$data = array('filename' => $newFileName, 'path' => $_mediaUrl.'wallpaper/'.$newFileName, 'fileType' => $_fileType, 'html' => $html);
}
} catch (Exception $e) {
$error = true;
$message = $e->getMessage();
}
$resultJson = $this->resultJsonFactory->create();
return $resultJson->setData([
'message' => $message,
'data' => $data,
'error' => $error
]);
}
}
Step3: Create one “DeleteCustomize.php” file to delete your uploaded image.
<?php
namespace MagemonkeysWallpaperControllerIndex;
use MagentoFrameworkJsonHelperData as JsonHelper;
class DeleteCustomize extends MagentoFrameworkAppActionAction
{
protected $_pageFactory;
protected $connection;
protected $_mediaDirectory;
protected $_fileUploaderFactory;
public $_storeManager;
protected $_file;
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkAppResourceConnection $connection,
JsonHelper $jsonHelper,
MagentoFrameworkControllerResultJsonFactory $resultJsonFactory,
MagentoFrameworkFilesystem $filesystem,
MagentoMediaStorageModelFileUploaderFactory $fileUploaderFactory,
MagentoStoreModelStoreManagerInterface $storeManager,
MagentoFrameworkFilesystemDriverFile $file,
MagentoFrameworkViewResultPageFactory $pageFactory)
{
$this->_pageFactory = $pageFactory;
$this->connection = $connection;
$this->jsonHelper = $jsonHelper;
$this->resultJsonFactory = $resultJsonFactory;
$this->_mediaDirectory = $filesystem->getDirectoryWrite(MagentoFrameworkAppFilesystemDirectoryList::MEDIA);
$this->_fileUploaderFactory = $fileUploaderFactory;
$this->_storeManager = $storeManager;
$this->_file = $file;
return parent::__construct($context);
}
public function execute(){
$_postData = $this->getRequest()->getPost();
$message = "";
$newFileName = "";
$success = false;
$mediaRootDir = $this->_mediaDirectory->getAbsolutePath();
$_fileName = $mediaRootDir .'wallpaper/'. $_postData['filename'];
if ($this->_file->isExists($_fileName)) {
try{
/*$this->attachment->load($_postData['imageID']);
$this->attachment->delete();*/
$this->_file->deleteFile($_fileName);
$message = __('File removed successfully.');
$success = true;
} catch (Exception $ex) {
$message = $ex->getMessage();
$success = false;
}
}else{
$message = "File not found.";
$success = false;
}
$resultJson = $this->resultJsonFactory->create();
return $resultJson->setData([
'message' => $message,
'data' => '',
'success' => $success
]);
}
}
Step4: Create one “ImageCustomize.php” file to give the effects to your uploaded image. I have given some effect to an image as per my requirements.
<?php
namespace MagemonkeysWallpaperControllerIndex;
use MagentoFrameworkJsonHelperData as JsonHelper;
class ImageCustomize extends MagentoFrameworkAppActionAction
{
protected $_pageFactory;
protected $connection;
protected $_mediaDirectory;
protected $_rootDirectory;
protected $_fileUploaderFactory;
public $_storeManager;
protected $_file;
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkAppResourceConnection $connection,
JsonHelper $jsonHelper,
MagentoFrameworkControllerResultJsonFactory $resultJsonFactory,
MagentoFrameworkFilesystem $filesystem,
MagentoMediaStorageModelFileUploaderFactory $fileUploaderFactory,
MagentoStoreModelStoreManagerInterface $storeManager,
MagentoFrameworkFilesystemDriverFile $file,
MagentoFrameworkViewResultPageFactory $pageFactory)
{
$this->_pageFactory = $pageFactory;
$this->connection = $connection;
$this->jsonHelper = $jsonHelper;
$this->resultJsonFactory = $resultJsonFactory;
$this->_mediaDirectory = $filesystem->getDirectoryWrite(MagentoFrameworkAppFilesystemDirectoryList::MEDIA);
$this->_rootDirectory = $filesystem->getDirectoryRead(MagentoFrameworkAppFilesystemDirectoryList::ROOT);
$this->_fileUploaderFactory = $fileUploaderFactory;
$this->_storeManager = $storeManager;
$this->_file = $file;
return parent::__construct($context);
}
public function execute(){
$_postData = $this->getRequest()->getPost();
$message = "";
$newFileName = "";
$error = false;
$data = array();
$uniqid = uniqid();
$mediaRootDir = $this->_mediaDirectory->getAbsolutePath();
$rootDirectory = $this->_rootDirectory->getAbsolutePath();
$_fileType = $_postData['fileType'];
$_fileAction = $_postData['fileAction'];
if($_postData['filename'] == '10221276943_45e198c6c6_4k.jpg')
{
$newFileName = $uniqid .'.'.$_fileType;
$filePath = $rootDirectory . $_postData['filename'];
$_fileName = $mediaRootDir .'wallpaper/'. $newFileName;
$newFullPathOfImage = $_fileName;
copy($filePath, $_fileName);
}
else
{
$_fileName = $mediaRootDir .'wallpaper/'. $_postData['filename'];
$newFullPathOfImage = $mediaRootDir .'wallpaper/'. $uniqid .'.'.$_fileType;
$newFileName = $uniqid .'.'.$_fileType;
}
if ($this->_file->isExists($_fileName)){
try{
if($_fileAction == 1) /*** Grayscale (Black & White) ***/
{
if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')
{
$im = ImageCreateFromJpeg($_fileName);
$imgw = imagesx($im);
$imgh = imagesy($im);
for ($i=0; $i<$imgw; $i++)
{
for ($j=0; $j<$imgh; $j++)
{
// get the rgb value for current pixel
$rgb = ImageColorAt($im, $i, $j);
// extract each value for r, g, b
$rr = ($rgb >> 16) & 0xFF;
$gg = ($rgb >> 8) & 0xFF;
$bb = $rgb & 0xFF;
// get the Value from the RGB value
$g = round(($rr + $gg + $bb) / 3);
// grayscale values have r=g=b=g
$val = imagecolorallocate($im, $g, $g, $g);
// set the gray value
imagesetpixel ($im, $i, $j, $val);
}
}
imagejpeg($im, $newFullPathOfImage);
$message = __('Image converted to grayscale.');
imagedestroy($im);
}
else
{
$im = imagecreatefrompng($_fileName);
if($im && imagefilter($im, IMG_FILTER_GRAYSCALE))
{
$message = __('Image converted to grayscale.');
imagepng($im, $newFullPathOfImage);
imagedestroy($im);
}
else
{
$message = __('Conversion to grayscale failed.');
}
}
}
else if($_fileAction == 2) /*** Sepia Color Scale ***/
{
if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')
{
// Load
$im = ImageCreateFromJpeg($_fileName);
imagefilter($im, IMG_FILTER_GRAYSCALE);
imagefilter($im,IMG_FILTER_BRIGHTNESS,-10);
imagefilter($im, IMG_FILTER_COLORIZE, 65, 50, 0);
// Output
imagejpeg($im, $newFullPathOfImage);
imagedestroy($im);
}
else
{
// Load
$im = imagecreatefrompng($_fileName);
imagefilter($im, IMG_FILTER_GRAYSCALE);
imagefilter($im,IMG_FILTER_BRIGHTNESS,-10);
imagefilter($im, IMG_FILTER_COLORIZE, 65, 50, 0);
// Output
imagepng($im, $newFullPathOfImage);
imagedestroy($im);
}
$message = __('Image converted to sepia.');
}
else if($_fileAction == 3) /*** Flip Image ***/
{
if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')
{
// Load
$im = ImageCreateFromJpeg($_fileName);
// Flip it horizontally
imageflip($im, IMG_FLIP_HORIZONTAL);
// Output
imagejpeg($im, $newFullPathOfImage);
imagedestroy($im);
}
else
{
// Load
$im = imagecreatefrompng($_fileName);
// Flip it horizontally
imageflip($im, IMG_FLIP_HORIZONTAL);
// Output
imagepng($im, $newFullPathOfImage);
imagedestroy($im);
}
$message = __('Image flipped.');
}
$_mediaUrl = $this->_storeManager->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA);
$_src = $_mediaUrl.'wallpaper/'.$newFileName;
$message = __("File has been successfully uploaded");
$html = '<div class="image item base-image" data-role="image" id="'. $uniqid .'">
<div class="wallpaper-image-wrapper">
<div class="radioContainer">
<input data-src="'.$_src.'" data-srctype="'. $_fileType .'" data-srcfilename="'. $newFileName .'" checked="checked" class="selectImage selectImage-'. $uniqid .'" type="radio" name="selectImage" value="'. $uniqid .'" />
</div>
<div class="imageContainer">
<img class="wallpaper-image" data-role="image-element" src="'.$_src.'" alt="">
</div>
<div class="delete-action">
<button type="button" class="action-remove" data-role="delete-button" data-image="'.$newFileName.'" title="'. __('Delete image') .'"><span>'. __('Delete image') .'</span></button>
</div>
</div>
</div>';
$data = array('filename' => $newFileName, 'path' => $_mediaUrl.'wallpaper/'.$newFileName, 'fileType' => $_fileType, 'html' => $html);
$error = false;
}
catch (Exception $ex) {
$message = $ex->getMessage();
$error = true;
}
}else{
$message = __("File not found.");
$error = true;
}
$resultJson = $this->resultJsonFactory->create();
return $resultJson->setData([
'message' => $message,
'data' => $data,
'error' => $error
]);
}
}
