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. – Dhiren Vasoya Feb 18 '17 at 10:06
  • we can get the "customized Product image" design only after we place an order please provide that code – Gopal Patel Feb 20 '17 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..... – Baby in Magento Feb 20 '17 at 6:30
  • after placing order you are getting text and image in single image??? if yes then provide code which merges design.\ – Gopal Patel Feb 20 '17 at 6:33
  • @GopalPatel after placing order also both are saving in 2 diferent images. i corrected question now, please check edited question.... – Baby in Magento Feb 20 '17 at 6:37

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.

| improve this answer | |
  • 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.... – Baby in Magento Feb 21 '17 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. – Baby in Magento Feb 21 '17 at 11:52
  • for the last paragraph in your answer, can you please update answer with code.... – Baby in Magento Feb 22 '17 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. – Ashish Jagnani Feb 22 '17 at 7:00

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.

| improve this answer | |
  • 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. – Baby in Magento Feb 21 '17 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 – Baby in Magento Feb 23 '17 at 13:20
  • in this path ??? @BabyinMagento – Gopal Patel Feb 23 '17 at 13:23
  • sorry in this path : media/custom_options/quote – Baby in Magento Feb 23 '17 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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