Всем привет,
Используя FabricsJS мне нужно загрузить картинку в уменьшеном размере и в "view" mode.
Я загружаю картинку width = 2480 и height = 1755 кодом:
| Код |
<div class='dashboard-layer1'>
<div class="flyer-previews">
</div>
</div>
...
var predefinedWidth= 380 // SIZE OF IMAGE I NEED
var predefinedHeight= 380
_obj= '<?php print json_encode($templateObj); ?>'; // data ofor image generating
var _orientation = '';
var _link = <?php print json_encode( "dashboard/flyers"); ?>;
// Add canvas and link it to its template
jQuery('<canvas>').attr({
id: 'preview-'
}).appendTo('.flyer-previews').wrap( jQuery('<a>').attr({
href: tmbn__findUrls( _link )[0]+'/'+_obj['format']+'/'+_obj['sku']
}) );
// Set Canvas object
var _stage_flag = new fabric.Canvas('preview-');
// Set stage dimensions
_stage_flag.setDimensions({
width: predefinedWidth,
height: predefinedHeight
});
// Set orientation
if( predefinedWidth > predefinedHeight ) { _orientation = 'landscape'; } else { _orientation = 'portrait'; }
// Load templates
_stage_flag.loadFromJSON( _obj, _stage_flag.renderAll.bind(_stage_flag), function( _object, _klass ) {
// Deactivate objects
_klass.selectable = false;
// Resize view
tmbn__dynamicScale( 'preview-', _orientation );
});
/**
* Scale thumbnails
*/
function tmbn__dynamicScale( _id, _orientation ) {
jQuery('#'+_id).parent().addClass(_orientation);
jQuery('#'+_id).parent().children('canvas').addClass(_orientation);
}
/**
* Get URL from Text
*/
function tmbn__findUrls( text ) {
var source = (text || '').toString();
var urlArray = [];
var url;
var matchArray;
// Regular expression to find FTP, HTTP(S) and email URLs.
var regexToken = /(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)|((mailto:)?[_.\w-]+@([\w][\w\-]+\.)+[a-zA-Z]{2,3})/g;
// Iterate through any URLs in the text.
while( (matchArray = regexToken.exec( source )) !== null ) {
var token = matchArray[0];
urlArray.push( token );
}
return urlArray;
}
|
И я получаю картинку со всеми загруженными обьектами на canvas, но размер canvas-ы 380/380 (переменные predefinedWidth и predefinedHeight)
а размер самой картинки 2480 / 1755, так что на canvas я вижу только правый верхний угол картинки...
Как вывести картинку ва нужном мне размере?
Спасибо!
|