save both image and text as single image in server

Question

we have product image in site like below image

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

also customer can and add text on that image

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 */
        $model
            ->setApplyOffsets($apply_offsets)
            ->setDataType($request->getPost('type'))
            ->initLayer('top', $data)
            ->initLayer('bottom', $request->getPost('data_bottom'))
            ->setPrintType($request->getPost('print_type'))
            ->prepareBackground($request->getPost('background'), $request->getPost('areaOffsetX'), $request->getPost('areaOffsetY'), $request->getPost('print_scale'))
            ->normalizeMask()
            ->processAdditional($request->getPost('additional'));

        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';
        }

        $this
            ->getResponse()->setHttpResponseCode(200)
            ->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);
        $this->getResponse()->clearBody();

        //$this->getResponse()->setBody(str_replace('xlink:','',$data));
        $this->getResponse()->setBody($data);
    }

code for SVG to PNG

public function svgtopngAction()
    {
        $model = $this->_processSvg(true);
        $model->resetMaskForPng();
        $data = $model->getSvgData(false, true);
        $data = $model->applyXlinkToData($data);
        $this->getResponse()->setBody($data);
    }

Save Design button code :

script

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

html

<?php
/**
 * @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">
    //<![CDATA[
    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);
    //]]>
</script>
<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>
        <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>
        </div>
        <?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; ?>
        </p>
        <?php endif; ?>
    </div>
</dd>
<script type="text/javascript">
    //<![CDATA[
    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; ?>
    });
    //]]>
</script>

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:

Answer 1

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.

Answer 2

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.