I am looping through 10-14 html elements, and generating image data in an array for later use for insertion into a PDF. The problem is that these images occasionally have a horizontal line across them, which seems seems to be an existing issue with html2canvas. Happens mostly in FF and IE, and occationally on Chrome, but not as often.
function convertElementsToImages(containerSelector) { if (_this.pdfDebug) { window.console.log('convertElementsToImages'); window.console.log(containerSelector); } var eles = $(containerSelector + ' > *'), q = $q.defer(), temp = []; //convert to canvas angular.forEach(eles, function(ele, eleKey) { convertElementToImage(ele).then(function(imageData) { temp[eleKey] = imageData; //last one, hopefully all previous elements have been resolved if (eles.length === eleKey + 1) { q.resolve(temp); } }); }); return q.promise; } function convertElementToImage(element) { var q = $q.defer(); html2canvas($(element)[0], { // jshint ignore:line onrendered: function(canvas) { q.resolve(canvas.toDataURL('image/jpeg')); } }); return q.promise; } 