html2canvas和toDataURL生成的图像有水平线

时间:2016-12-09 00:30:00

标签: javascript jquery angularjs html2canvas todataurl

我循环遍历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;
}

sample image with line

0 个答案:

没有答案