radykal | Support Center Chooser

For which product do you need support?

Fancy Product Designer Multistep Product Configurator Another

Start a new topic

How to scale product image?


I have basic product fancy designer, this is configuration:


const $yourDesigner = $('#clothing-designer-plus');

const pluginOpts = {
	stageWidth: 1200,
	editorMode: true,
	langJSON: 'dist/product-designer/lang/default.json',
	templatesDirectory: 'dist/product-designer/html/',
	fonts: [
		{name: 'Helvetica'},
		{name: 'Times New Roman'},
		{name: 'Pacifico', url: 'dist/fonts/Pacifico.ttf'},
		{name: 'Arial'},
		{name: 'Lobster', url: 'google'},
	customTextParameters: {
		colors: false,
		removable: true,
		resizable: true,
		draggable: true,
		rotatable: true,
		autoCenter: true,
		boundingBox: 'Base',
	customImageParameters: {
		draggable: true,
		removable: true,
		resizable: true,
		rotatable: true,
		colors: '#000',
		autoCenter: true,
		boundingBox: 'Base',
	actions: {
		'top': ['download', 'print', 'snap', 'preview-lightbox'],
		'right': ['magnify-glass', 'zoom', 'reset-product', /*'qr-code',*/ 'ruler'],
		'bottom': ['undo', 'redo'],
		'left': ['manage-layers', 'info', 'save', 'load'],
	mainBarModules: ['products', 'images', 'text', 'designs', 'manage-layers', /*'names-numbers,*/ 'drawing'],
	colorSelectionPlacement: 'inside-br',
	namesNumbersDropdown: ['S', 'M', 'L', 'XL'],
	namesNumbersEntryPrice: 10,

const yourDesigner = new FancyProductDesignerPlus($yourDesigner, pluginOpts);

 and I want to add new product (and remove other products there are in editor). I somehow managed how to do it, but the problem is that image is too large, so it overlaps canvas. Is there any way how to scale image on client side so I do not need to scale every image I want to use in editor?

This is code how I add new product:


const productID = '123456';
const thumbnail = '/uploads/images/dfnjignjdfjf.jpg';

var viewsArr = [];
var viewObj = {
	title: 'View of ' + productID,
	thumbnail: thumbnail,
	elements: [],
	options: []
viewObj.productTitle = 'Product ' + productID;
//viewObj.productThumbnail = thumbnail;

var elementObj = {
	type: 'image',
	source: thumbnail,
	title: 'Element ' + productID,
	parameters: {}


yourDesigner.loadProduct(viewsArr, true, true);


(195 KB)

Best Answer

Please open a support ticket so we can help you with your issue. 

1 Comment


Please open a support ticket so we can help you with your issue. 

Login or Signup to post a comment