html2canvas and toDataURL generated image has horizontal line

问题

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

来源：https://stackoverflow.com/questions/41051228/html2canvas-and-todataurl-generated-image-has-horizontal-line