Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


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);



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

Login or Signup to post a comment