How to scale product image?

Posted over 5 years ago by Adam

Post a topic
Answered
A
Adam

Hi,

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: {}
};

viewObj.elements.push(elementObj);
viewsArr.push(viewObj);

yourDesigner.addProduct(viewsArr);
yourDesigner.loadProduct(viewsArr, true, true);

 

Attachments (1)

0 Votes

rady kal

rady kal posted over 5 years ago Admin Best Answer

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

0 Votes


1 Comments

rady kal

rady kal posted over 5 years ago Admin Answer

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

0 Votes

Login or Sign up to post a comment