we have product image in site like below image

enter image description here

We are providing an option for customer to upload custom image on product image.

enter image description here

also customer can and add text on that image

enter image description here

Here Problem is Customized Product design is saving as 2 different imagesas below links in server [ 1.Text & 2.uploaded image as separately] but what we want is once Customer click on "save design" we want to save that "customized Product image" in server as single image.

image path : http://sbdev2.kidsdial.com:81/media/custom_product_preview/quote/White_Background_Iphone_Pics_1.jpg

text path : http://sbdev2.kidsdial.com:81/media/custom_product_preview/quote/1b22f071-1ad8-e945.png

code for svg

protected function _processSvg( $apply_offsets = false )
        $request = $this->getRequest();

        $data = $request->getPost('data');

        if(empty($data)){header('Location: '.Mage::getBaseUrl());die;}
        $model = Mage::getModel('aitcg/image_svg');
        /** @var $model Aitoc_Aitcg_Model_Image_Svg */
            ->initLayer('top', $data)
            ->initLayer('bottom', $request->getPost('data_bottom'))
            ->prepareBackground($request->getPost('background'), $request->getPost('areaOffsetX'), $request->getPost('areaOffsetY'), $request->getPost('print_scale'))

        return $model;

    public function svgAction()
        $model = $this->_processSvg();
        $data = $model->normalizeSvgData();
        //$data = $mode->getSvgData();

        if ($model->getAdditionalData('order_increment_id'))
            $filename = 'Order_' . $model->getAdditionalData('order_increment_id') . '_Image.svg';
        } else {
            $filename = 'Customer_Product_Image.svg';

            ->setHeader('Pragma', 'public', true)
            ->setHeader('Cache-Control', 'must-revalidate, post-check=0, pre-check=0', true)
            ->setHeader('Content-type', 'image/svg+xml', true)
            ->setHeader('Content-Disposition','attachment; filename="'.$filename.'"',true);


code for SVG to PNG

public function svgtopngAction()
        $model = $this->_processSvg(true);
        $data = $model->getSvgData(false, true);
        $data = $model->applyXlinkToData($data);

Save Design button code :


var aitcgBaseConfig = {
    text: {
apply: "<?php echo $this->__('SAVE DESIGN') ?>",


 * @var $this Aitoc_Aitcg_Block_Catalog_Product_View_Options_Type_File
$_option = $this->getOption();
$_fileInfo = $this->getFileInfo();
$_image = $this->getImage();
$_rand = rand();
$_fileOption = 'options_' . $_option->getId();
$_preview = $this->getPreview();
$_defaultValues = isset($_preview['img_data']) ?
    $_preview :
    array('img_data' => '');
$checkboxEnabled = (int)Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_checkbox');
if ($checkboxEnabled) {
    $fullCheckboxEnabled = Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_fullcheckbox');
$sharedImgId  = Mage::helper('aitcg')->getSharedImgId($_rand);
$sharedImgUrl = Mage::helper('aitcg')->getSharedImgUrl($sharedImgId);
$sharedImgWasCreatedUrl = Mage::helper('aitcg')->getSharedImgWasCreatedUrl(); ?>
<link rel="stylesheet" type="text/css" href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);?>fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);?>fancybox/jquery.fancybox.js"></script>
<script type="text/javascript">
    var aitcgConfig<?php echo $_rand; ?> = {
    <?php if($_image !== false): ?>
    optionIsRequired: <?php echo (int)$_option->getIsRequire(); ?>,

    productImage: {
        fullUrl: '<?php echo $_image["full_image"]; ?>',
        sizeX  :  <?php echo $_image["default_size"][0]; ?>,
        sizeY  :  <?php echo $_image["default_size"][1]; ?>,

        thumb: {
            fullUrl: '<?php echo $_image["thumbnail_url"]; ?>',
            sizeX  :  <?php echo $_image["thumbnail_size"][0]; ?>,
            sizeY  :  <?php echo $_image["thumbnail_size"][1]; ?>

    tools: {
        use: {
            PredefinedImage: <?php echo (int)$_option->getUsePredefinedImage() ?>,
            Mask           : <?php echo (int)$_option->getUseMasks() ?>,
            UserImage      : <?php echo (int)$_option->getUseUserImage() ?>,
            Text           : <?php echo (int)$_option->getUseText() ?>,
            Social         : <?php echo (int)Mage::getStoreConfig('catalog/aitcg/aitcg_use_social_networks_sharing') ?>,
            Save           : 1
        global: ['Save', 'Social'],
        PredefinedImage: {
            requestUrl        : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/addPredefined')); ?>',
            options           :  <?php echo Mage::helper('aitcg/category')->getPredefinedCatsOptionHtml($_option->getPredefinedCats()); ?>'',
            categoryPreviewUrl: '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/categoryPreview'))?>',
            placeBehind    :  <?php echo (int)$this->getAllowPlaceBehind()?>,
            DefaultImageBehind: <?php echo (int)$_option->getDefImgBehindClip() ?>

        UserImage: {
            requestUrl: '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/addImage')); ?>',
            placeBehind    :  <?php echo (int)$this->getAllowPlaceBehind()?>,
            DefaultImageBehind: <?php echo (int)$_option->getDefImgBehindImage() ?>

        Save: {
            saveSvgUrl            : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/index/svg')); ?>',
            normalizateSvgToPngUrl: '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/index/svgtopng')); ?>',
            //getPrint - to update
            savePdfUrl            : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl($this->getSavePdfUrl()); ?>',
            saveImageDefaultUrl   : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/createImageDefault')); ?>',
            isShow                : <?php echo (int)$_option->getAllowSaveGraphics() ?>

    jsUrl: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);?>',  
    editorEnabled: true,

    <?php else: ?>
        editorEnabled: false,

        <?php endif; ?>
        viewType: '<?php echo ucfirst(Mage::getStoreConfig('catalog/aitcg/aitcg_editor_position')); ?>',
        rand: '<?php echo $_rand; ?>',
        checkboxEnabled: <?php echo (int)$checkboxEnabled; ?>,
        allowUploadUnderTemplate: 1,

        product_id        : '<?php echo $_option->getProductId(); ?>',
        optionId          :  <?php echo $_option->getId() ?>,
        distortion        :  <?php echo $this->isObjectDistortionAllowed()?>,
        previewContainer  : 'preview_container<?php echo $_option->getId(); ?>',

        toolboxStyle: '<?php echo Mage::getStoreConfig('catalog/aitcg/aitcg_toolbox_style'); ?>'
    Object.extend(aitcgConfig<?php echo $_rand; ?>, aitcgBaseConfig);
<dt><label<?php if ($_option->getIsRequire()) : ?> class="required"<?php endif ?>><?php //echo  $this->htmlEscape($_option->getTitle()) ?><?php if($this->isMageGtEq19() && $_option->getIsRequire()) : ?><em>*</em><?php elseif ($_option->getIsRequire()) : ?> <span class="required"><em>*</em></span><?php endif ?></label>
    <?php echo $this->getFormatedPrice() ?></dt>
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
        <div class="aitcg_error" style="display: none;">
            <?php echo $this->__('Sorry, but your browser does NOT support HTML5 elements and this feature is not working or may work incorrectly.');?><br />
            <span class="error_default" style="display: none"><?php echo $this->__('Please, try using different browser.');?></span>
            <span class="error_android" style="display: none"><?php echo $this->__('Please, try using different browser (Opera Mini for example) or update your Android to a newer version.');?></span>
        <?php //echo $this->__('Click on the thumbnail to choose the product image for editing.'); ?>
        <div class="aitcg_image_div"  style="float:none;display:none;" id="preview_container<?php echo $_option->getId(); ?>"></div>
        <input type="hidden" id="options_<?php echo $_option->getId() ?>" class="input-text<?php echo $_option->getIsRequire() ? ' aitcg-required' : '' ?> product-custom-option" name="options[<?php echo $_option->getId() ?>]" value='<?php echo $this->htmlEscape($_defaultValues['img_data'])?>' />
        <?php if ($checkboxEnabled == 1): ?>
        <p class="no-margin">
            <input type="checkbox" name="<?php echo $_rand; ?>_checkbox" id="<?php echo $_fileOption; ?>_checkbox" class="product-custom-option <?php if ($_option->getIsRequire()) : ?>required-entry<?php endif ?>" <?php if($fullCheckboxEnabled == 1): ?>onClick="return opCimage<?php echo $_rand; ?>.checkConfirmBox(this);" <?php endif; ?>/>
            <?php if($fullCheckboxEnabled == 1): ?>
            <a href="#" onClick="return opCimage<?php echo $_rand; ?>.checkConfirmBox(this);"><?php echo Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_text'); ?></a>
            <?php else: ?>
            <label for="<?php echo $_fileOption; ?>_checkbox"><?php echo Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_text'); ?></label>
            <?php endif; ?>
        <?php endif; ?>
<script type="text/javascript">
    var opCimage<?php echo $_rand; ?> = null;
    aitcgWindowOnload.push( function(){
        opCimage<?php echo $_rand; ?> = new Aitcg_Option( aitcgConfig<?php echo $_rand; ?> );
        opCimage<?php echo $_rand; ?>.view.initPreview();
    <?php if(Mage::helper('aitcg')->isVYAEnabled()): ?>
        if(typeof objectsCPPVYA == 'undefined'){
            objectsCPPVYA = [];
        objectsCPPVYA.unshift(opCimage<?php echo $_rand; ?>);
        <?php endif; ?>

We have option of saving customized product image as single image from frontend. once we click on Save graphics & than save as PNG button we can save the image from frontend to customer's local system [computer] . but that image is not saving in server. in same way, once we click on "Save Design" button, we want to save the image in server:

enter image description here

  • you can save image using event observer. Commented Feb 18, 2017 at 10:06
  • we can get the "customized Product image" design only after we place an order please provide that code Commented Feb 20, 2017 at 6:25
  • @GopalPatel yes , after we place an order, in backend > order view page we can see customized Product design , but in backend also we can not save that design as single image, again we need to save both text & image separately..... but i want to save both in single image..... Commented Feb 20, 2017 at 6:30
  • after placing order you are getting text and image in single image??? if yes then provide code which merges design.\ Commented Feb 20, 2017 at 6:33
  • @GopalPatel after placing order also both are saving in 2 diferent images. i corrected question now, please check edited question.... Commented Feb 20, 2017 at 6:37

2 Answers 2


Its a too lengthy question. You have to use lots of JS event and Magento event to event to create this.

  1. First You have to create a SVG product image with different Text on it as you want to show.
  2. You have to add a text box in frontend and on change event of that textbox you have to update the canvas of product image.
  3. On click add to cart you have to upload this image on certain place.
  4. Also you have to create a extra field in quote item table and order item table
  5. At add to cart after event you have to save this image path in quote item table and convert this image in order item.
  6. You also have to show this image in order view page (admin and frontend)

There is a extension available for the same process.

To Save that image on server side you have to create a form and on click to Add to Cart you have to submit a form with user text. And in that you have to create image at server end and save that image with text and put that image path in quote.

  • Thanks for your suggestions, but we already using custom module for this and we did lot of customizations as per client requirement and client is not interested to buy any other module, please help me to solve the issue without using any other extension.... Commented Feb 21, 2017 at 11:47
  • to say complete question in one word : we want save customized product image in server once we click on "save design" button as => "save as svg" button will save the "customized product image" in customers computer. Commented Feb 21, 2017 at 11:52
  • for the last paragraph in your answer, can you please update answer with code.... Commented Feb 22, 2017 at 6:06
  • @BabyinMagento, it will not work on list page. On product view page change add to cart button event and set button type = submit. And create a form on view page where you are creating the text field to entering the text. Post the form and send all values in your method and there you have to create image from those values and save that image on server. Commented Feb 22, 2017 at 7:00
  • please join : chat.stackexchange.com/rooms/53996/custom-case-3 Commented Feb 22, 2017 at 7:01

on product page after adding image and text when you save the design it converts it into svg

It calls the action svgtopng of indexcontroller of aitcg module.

I found something save to png and save as pdf in your DOM. So may be your extension provides the save to png functionality.

Go through extension documentation or code.

  • to say complete question in one word : we want save customized product image in server once we click on "save design" button as => "save as svg" button will save the "customized product image" in customers computer. Commented Feb 21, 2017 at 11:56
  • okay , after some customization, now once we click on "Add to cart" button , "customized Product image design" is saving in server in this path , but i want to save in server once we click on save design button in link Commented Feb 23, 2017 at 13:20
  • in this path ??? @BabyinMagento Commented Feb 23, 2017 at 13:23
  • sorry in this path : media/custom_options/quote Commented Feb 23, 2017 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.