Develop Reference

FabricJS: How to manually set object width and height

I have a fabric rectangle and I want to change width & height manually. The problem is the next: When I first resize rect with scaling it makes resize as expected, but when after this I try to change the values in my inputs - the rectangle rerenders with wrong dimensions, but the width & height values in javascript object correct.
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="draw"></canvas>
width:<input type="number" id="w" value="50">
var w = document.getElementById('w');
var c = new fabric.Canvas('draw');
var rect = new fabric.Rect({
top: 50,
left: 50,
width: parseInt(w.value),
height: parseInt(h.value),
fill: 'lightblue',
type: 'rect'
});
c.add(rect);
c.renderAll();
c.on('object:scaling', function(e) {
var width = parseInt(e.target.width * e.target.scaleX);
w.value = width;
});
w.addEventListener('change', function(e) {
rect.set('width', parseInt(e.target.value));
rect.setCoords();
c.requestRenderAll();
});
screenshot
jsfiddle

Found a solution, maybe this will help someone. When we listen for a change of width/height, we also should take into account the current scale value.
w.addEventListener('change', (e) => {
const scale = rect.getObjectScaling();
rect.set('width', parseInt(e.target.value) / scale.scaleX);
rect.setCoords();
rect.requestRenderAll();
});

Convert HTML Div to PDF via jsPDF that has SVG

I am trying to convert a html div to pdf using jsPDF. With in my div I have a svg file with background image where user can draw rectangle, line, text etc. I am using d3.js for drawing. Now I want to save my div with all drawing to pdf but it only converting my text to pdf. My js code is
function htmlToPdf() {
console.log("--------------- with in demoFromHTML");
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('svg.plancontainer')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
// pdf.autoPrint();
pdf.output('dataurlnewwindow');
}, margins
);
}
and cdn is <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
It print PRINT AREA instead of my image and text with out svg drawing.
It is my sample div's preview that I want to convert to pdf
I did not get any specific informatin that specify where it is possible using jsPDF or not.
Now my questions are
Is it possible using jsPDF or any other js library ?
If possible, would you please suggest me?
Any kind of help are appreciated. Thanks.

I am sharing my solution that may help someone. I could not manage print svg directly using jspdf instead what I have done is first convert svg to image using https://github.com/exupero/saveSvgAsPng then use that image to create pdf. Below is my code
Get base64 image uri using svgAsPngUri method of saveSvgAsPng and pass that image through callback function
svgAsPngUri(#svgObj, options, function (uri, options) {
pdf(uri, options.pdf)
});
where I am getting image uri as uri. With in my pdf function I am using this uri to make pdf
function pdf(b64Image, options) {
console.log("--------------- passing options is ", JSON.stringify(options, null, 4));
var image = new Image();
image.src = b64Image;
console.log('--------- pdf options' + JSON.stringify(options, null, 4));
var pdf = new jsPDF(options.orientation, null, options.format);
margins = {
top: 20,
bottom: 20,
left: 20,
right: 20
};
var pdfWidth = pdf.internal.pageSize.width;
var pdfHeight = pdf.internal.pageSize.height;
var footer_height = options.f_height || 30;
var htmlPageRightOffset = 0;
var outerRacBorder = 2;
var imageDrawableHeight = pdfHeight - margins.top - margins.bottom - footer_height - outerRacBorder;
var imageDrawableWidth = pdfWidth - margins.left - margins.right - outerRacBorder;
footer = {
top: margins.top + imageDrawableHeight + outerRacBorder + 10,
bottom: 20,
left: margins.left,
right: 20,
width: 100,
height: 25,
};
company_text_position = {
x: footer.left+2,
y: footer.top + 6
};
site_text_position = {
x: company_text_position.x,
y: company_text_position.y + 6
};
floor_plan_text_position = {
x: site_text_position.x,
y: site_text_position.y + 6
};
logo_text_position = {
x: pdfWidth - margins.left - 55,
y: pdfHeight - margins.bottom - 4
};
logo_image_position = {
x: logo_text_position.x +35,
y: logo_text_position.y - 4
};
/*
Image drawing on pdf
*/
imageSize = calculateAspectRatioFit(image.width, image.height, imageDrawableWidth, imageDrawableHeight);
pdf.addImage(image, 'JPEG', margins.left + 2, margins.top + 2, imageSize.width, imageSize.height);
/*
Outer rectangle
*/
pdf.rect(margins.left, margins.top, imageDrawableWidth + outerRacBorder, imageDrawableHeight + outerRacBorder);
// pdf.rect(margins.left, imageSize.height + 10, drawableWidth, (drawableWidth - imageSize.height));
pdf.rect(footer.left, footer.top, footer.width, footer.height);
console.log(footer.left);
console.log(footer.company_x);
var footer_data = getFooterInfo();
pdf.text("Company: " + footer_data.client, company_text_position.x, company_text_position.y);
pdf.text("Site: " + footer_data.site, site_text_position.x, site_text_position.y);
pdf.text("Floor Plan: " + footer_data.floor_plan, floor_plan_text_position.x, floor_plan_text_position.y);
pdf.text("Powered by: ", logo_text_position.x, logo_text_position.y);
var logo = new Image();
logo.src = $('#logo_image').val();
console.log(logo);
logoSize = calculateAspectRatioFit(logo.width, logo.height, 20, 10);
pdf.addImage(logo, 'JPEG', logo_image_position.x, logo_image_position.y, logoSize.width, logoSize.height);
pdf.autoPrint();
pdf.save(options.name + '.pdf');
}
/**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* #param {Number} srcWidth Source area width
* #param {Number} srcHeight Source area height
* #param {Number} maxWidth Fittable area maximum available width
* #param {Number} maxHeight Fittable area maximum available height
* #return {Object} { width, heigth }
*
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
if(srcHeight == 0 || srcWidth == 0){
return {width: maxWidth, height: maxHeight};
}
var ratio = [maxWidth / srcWidth, maxHeight / srcHeight];
ratio = Math.min(ratio[0], ratio[1]);
return {width: srcWidth * ratio, height: srcHeight * ratio};
}
function getFooterInfo() {
var elem = $('.entityselbin .h4');
var info = {};
info.client = elem[0].innerHTML;
info.site = elem[1].innerHTML;
info.floor_plan = elem[2].innerHTML;
return info;
}

You can directly write the SVG to PDF with the latest canvg_context2d method mention in the example
https://github.com/MrRio/jsPDF/blob/master/examples/canvg_context2d/bar_graph_with_text_and_lines.html
This works for most of the svg contents.

Below is the working example of above question.
Need to include these three file refernece
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"),
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js")
function createPDF() {
var svg = '';
// Provide the SVG parent div id
if (document.getElementById("ChartId") != null) {
svg = document.getElementById("ChartId").innerHTML;
}
if (svg)
svg = svg.replace(/\r?\n|\r/g, '').trim();
var pdfData = $('#htmlContainer');//main html div
html2canvas(pdfData, {
onrendered: function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//The height of the canvas which one pdf page can show;
var pageHeight = contentWidth / 592.28 * 841.89;
//the height of canvas that haven't render to pdf
var leftHeight = contentHeight;
//addImage y-axial offset
var position = 0;
//a4 format [595.28,841.89]
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var ctx = canvas.getContext('2d');
canvg(canvas, svg, {
offsetX: 10,
offsetY: 660,
ignoreMouse: true,
ignoreAnimation: true,
ignoreClear: true,
ignoreDimensions: true
});
var pageData = new Image();
pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('l', 'pt', 'a4', true);
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 100, 20, imgWidth, imgHeight);
} else {
console.log('page 2');
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//avoid blank page
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('Test.pdf');
}
});
}
Hope this will be helpful.

How can I create a new object with multiple methods?

I am trying to follow this tutorial here https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/ and I am stuck on the second part. (2. A Blank Canvas)
I am not sure where to put the POP.Draw object. Does it go inside of the var POP{} brackets where the other objects are created? I've tried keeping it inside, outside, and in the init function which I don't think makes sense. The purpose is to create methods within the new Draw object so they can be called later to create pictures in the canvas.
Here is my current code. It is the same as the one in the link:
var POP = {
//setting up initial values
WIDTH: 320,
HEIGHT: 480,
// we'll set the rest of these
//in the init function
RATIO: null,
currentWidth: null,
currentHeight: null,
canvas: null,
ctx: null,
init: function() {
//the proportion of width to height
POP.RATIO = POP.WIDTH / POP.HEIGHT;
//these will change when the screen is resized
POP.currentWidth = POP.WIDTH;
POP.currentHeight = POP.HEIGHT;
//this is our canvas element
POP.canvas = document.getElementsByTagName('canvas')[0];
//setting this is important
//otherwise the browser will
//default to 320x200
POP.canvas.width = POP.WIDTH;
POP.canvas.width = POP.HEIGHT;
//the canvas context enables us to
//interact with the canvas api
POP.ctx = POP.canvas.getContext('2d');
//we need to sniff out Android and iOS
// so that we can hide the address bar in
// our resize function
POP.ua = navigator.userAgent.toLowerCase();
POP.android = POP.ua.indexOf('android') > -1 ? true : false;
POP.ios = (POP.ua.indexOf('iphone') > -1 || POP.ua.indexOf('ipad') > -1) ? true : false;
//we're ready to resize
POP.resize();
POP.Draw.clear();
POP.Draw.rect(120, 120, 150, 150, 'green');
POP.Draw.circle(100, 100, 50, 'rgba(225,0,0,0.5)');
POP.Draw.text('Hello WOrld', 100, 100, 10, "#000");
},
resize: function() {
POP.currentHeight = window.innerHeight;
//resize the width in proportion to the new height
POP.currentWidth = POP.currentHeight * POP.RATIO;
//this will create some extra space on the page
//allowing us to scroll past the address bar thus hiding it
if (POP.android || POP.ios) {
document.body.style.height = (window.innerHeight + 50) + 'px';
}
//set the new canvas style width and height note:
//our canvas is still 320 x 400 but we're essentially scaling it with css
POP.canvas.style.width = POP.currentWidth + 'px';
POP.canvas.style.height = POP.currentHeight + 'px';
//we use a timeout here because some mobile browsers
//don't fire if there is not a short delay
window.selfTimeout(function() {
window.scrollTo(0, 1);
})
//this will create some extra space on the page
//enabling us to scroll past the address bar
//thus hiding it
if (POP.android || POP.ios) {
document.body.style.height = (window.innerHeight + 50) + 'px';
}
}
};
window.addEventListener('load', POP.init, false);
window.addEventListener('resize', POP.resize, false);
//abstracts various canvas operations into standalone functions
POP.Draw = {
clear: function() {
POP.ctx.clearRect(0, 0, POP.WIDTH, POP.HEIGHT);
},
rect: function(x, y, w, h, col) {
POP.ctx.fillStyle = col;
POP.ctx.fillRect(x, y, w, h);
},
circle: function(x, y, r, col) {
POP.ctx.fillStyle = col;
POP.ctx.beginPath();
POP.ctx.arc(x + 5, y + 5, r, 0, Math.PI * 2, true);
POP.ctx.closePath();
POP.ctx.fill();
},
text: function(string, x, y, size, col) {
POP.ctx.font = 'bold' + size + 'px Monospace';
POP.ctx.fillStyle = col;
POP.ctx.fillText(string, x, y);
}
};

SOLVED
I didn't realize but the completed code is on the webpage. I downloaded it and looked at the example for answers.
I solved the issue by placing the POP.Draw.clear, POP.Draw.rect methods before calling the POP.resize() method. I'm not really sure why the order matters, but it does.

Canvas - IndexSizeError: Index or size is negative or greater than the allowed amount

So in Firefox I'm getting this error in the console when using drawImage on a canvas element.
"IndexSizeError: Index or size is negative or greater than the allowed amount"
Everything is working fine in Chrome. Common causes for this I found were returning negative values or trying to draw the image to the canvas before the image is actually loaded. Neither of which seem to be the case. What am I missing here?
Any ideas would be greatly appreciated. http://jsfiddle.net/Ra9KQ/3/
var NameSpace = NameSpace || {};
NameSpace.Pixelator = (function() {
var _cache = {
'wrapper' : null,
'canvas' : null,
'ctx' : null,
'img' : new Image()
},
_config = {
'canvasWidth' : 250,
'canvasHeight' : 250,
'isPlaying' : false,
'distortMin' : 3,
'distortMax' : 100,
'distortValue' : 100, // matches distortMax by default
'initDistortValue' : 3,
'speed' : 2.5,
'delta' : 2.5, // delta (+/- step), matches speed by default
'animation' : null,
'origImgWidth' : null,
'origImgHeight' : null,
'imgHeightRatio' : null,
'imgWidthRatio' : null,
'newImgWidth' : null,
'newImgHeight' : null
},
_init = function _init() {
_setupCache();
_setupCanvas();
_setupImage();
},
_setupCache = function _setupCache() {
_cache.wrapper = $('#dummy-wrapper');
_cache.canvas = document.getElementById('dummy-canvas');
_cache.ctx = _cache.canvas.getContext('2d');
},
_setupCanvas = function _setupCanvas() {
_cache.ctx.mozImageSmoothingEnabled = false;
_cache.ctx.webkitImageSmoothingEnabled = false;
_cache.ctx.imageSmoothingEnabled = false;
},
_setupImage = function _setupImage() {
_cache.img.onload = function() {
_adjustImageScale();
_pixelate();
_assignEvents();
};
_cache.img.src = _cache.canvas.getAttribute('data-src');
},
_adjustImageScale = function _adjustImageScale() {
var scaledHeight,
scaledWidth;
_config.origImgWidth = _cache.img.width;
_config.origImgHeight = _cache.img.height;
_config.imgHeightRatio = _config.origImgHeight / _config.origImgWidth;
_config.imgWidthRatio = _config.origImgWidth / _config.origImgHeight;
scaledHeight = Math.round(250 * _config.imgHeightRatio);
scaledWidth = Math.round(250 * _config.imgWidthRatio);
if (scaledHeight < 250) {
_config.newImgHeight = 250;
_config.newImgWidth = Math.round(_config.newImgHeight * _config.imgWidthRatio);
} else if (scaledWidth < 250) {
_config.newImgWidth = 250;
_config.newImgHeight = Math.round(_config.newImgWidth * _config.imgHeightRatio);
}
},
_assignEvents = function _assignEvents() {
_cache.wrapper.on('mouseenter', _mouseEnterHandler);
_cache.wrapper.on('mouseleave', _mouseLeaveHandler);
},
_mouseEnterHandler = function _mouseEnterHandler(e) {
_config.delta = -_config.speed;
if (_config.isPlaying === false) {
_config.isPlaying = true;
_animate();
}
},
_mouseLeaveHandler = function _mouseLeaveHandler(e) {
_config.delta = _config.speed;
if (_config.isPlaying === false) {
_config.isPlaying = true;
_animate();
}
},
_pixelate = function _pixelate(val) {
var size = val ? val * 0.01 : 1,
w = Math.ceil(_config.newImgWidth * size),
h = Math.ceil(_config.newImgHeight * size);
console.log('w: ' + w,'h: ' + h,'_config.newImgWidth: ' + _config.newImgWidth,'_config.newImgHeight: ' + _config.newImgHeight);
_cache.ctx.drawImage(_cache.img, 0, 0, w, h);
_cache.ctx.drawImage(_cache.canvas, 0, 0, w, h, 0, 0, _config.canvasWidth, _config.canvasHeight);
},
_animate = function _animate() {
// increase/decrese with delta set by mouse over/out
_config.distortValue += _config.delta;
if (_config.distortValue >= _config.distortMax || _config.distortValue <= _config.distortMin) {
_config.isPlaying = false;
cancelAnimationFrame(_config.animation);
return;
} else {
// pixelate
_pixelate(_config.distortValue);
_config.animation = requestAnimationFrame(_animate);
}
};
return {
init: _init
};
})();
NameSpace.Pixelator.init();

When you are using clipping you need to make sure that the source region is within the image (not necessary for target as this will be clipped by canvas).
So if you add restriction control it should work. Here is one way of doing this (before using the clipping functionality of drawImage):
if (w > _config.canvasWidth) w = _config.canvasWidth;
if (h > _config.canvasHeight) h = _config.canvasHeight;
_cache.ctx.drawImage(_cache.canvas, 0, 0, w, h,
0, 0, _config.canvasWidth, _config.canvasHeight);
Modified fiddle here.
Tip 1:
Normally this also applies to x and y but as these are 0 here there is no need to check.
Tip 2:
If you need the image to be drawn narrower than you need to instead of changing source region, change the target region.

Width and Height of image you draw when you specify size values should be larger or equal to 1. As well for performance advantages floor all values you pass to it.
If width and/or height is 0, it will result in:
IndexSizeError: Index or size is negative or greater than the allowed amount
In Firefox:
width = Math.max(1, Math.floor(width));
height = Math.max(1, Math.floor(height));
ctx.drawImage(image, x, y, width, height);

To help others, I had the same problem in canvas and I solve taking account on image load, for example :
var image = new Image();
image.crossOrigin = "use-credentials";
image.onload = function(){
// here canvas behavior
};
image.src = imgSrc;

I had the same problem but in IE and Safari. There were three things in particular that I had to fix:
1) I had to set the width and height of the image manually.
var image = new Image();
...
image.width = 34;
image.height = 34;
2) I had to avoid using negative offset when creating ol.style.Icon. In this case I had to change my SVG icon, but that pretty much depends to your icon. So this would cause exception because of the negative offset:
var icon = new ol.style.Style({
"image": new ol.style.Icon({
...
"offset": [0, -50]
})
});
3) I had to round the width and height values. As some of them were calculated dynamically, I had values like 34.378 which were causing problems. So I had to round them and pass the Integer value.

How to reference a Raphael canvas created dynamically?

I'm creating a jQuery plugin that creates Raphael objects on the fly, let's say you do...
$("div").draw({
type: 'circle',
radius: '10',
color: '#000'
})
And the plugin code (just as an example):
$.fn.draw = function( options ) {
//settings/options stuff
var width = $(this).width();
var height = $(this).height();
var widget = Raphael($(this)[0], width, height);
var c = widget.circle(...).attr({...})
//saving the raphael reference in the element itself
$(this).data('raphael', {
circle : c
})
}
But then I'd like to be able to update elements like this:
$("div").draw({
type: 'update',
radius: '20',
color: '#fff'
});
I can "rescue" the object doing $(this).data().raphael.circle, but then it refuses to animate, I know it's a raphael object because it even has the animate proto , but it yields a Uncaught TypeError: Cannot read property '0' of undefined).

I tried out your code, made some modifications, and $(this).data().raphael.circle does animate. This is what I did (I know it's not exactly the same as yours, but gives the gist)
$.fn.draw = function( options ) {
//settings/options stuff
if(options.type === 'draw') {
var width = $(this).width();
var height = $(this).height();
var widget = Raphael($(this)[0], width, height);
var c = widget.circle(100, 100, 50);
//saving the raphael reference in the element itself
$(this).data('raphael', {
circle : c
});
//$(this).data().raphael.circle.animate() does not work here
}
else if(options.type === 'update') {
$(this).data().raphael.circle.animate({cx: 200, cy: 200});
//But this works here
}
}
In this case, referencing the element with $(this).data().raphael.circle does work, but only in the else if. I'm not sure why.