我循环遍历10-14个html元素,并在数组中生成图像数据,以便以后用于插入PDF。问题是这些图像偶尔会有一条水平线,这似乎是html2canvas的一个现存问题。主要发生在FF和IE中,并且在Chrome上发生,但不常见。
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;
}