getElementsByTagName(…).0[removed]' is null or

2019-08-09 03:08发布

问题:

I'm using Google Chart for my application and I have to convert the generated chart to image byte code. I've done this in Firefox and Chrome but IE8 is not responding to get the svg element, So now I can't to get the byte code from the given div element. My script to convert div element to byte code is given below

function getElement() {
    for (var i = 0; i < divelement.length; i++) {
        toImg(document.getElementById(divelement[i]), i, medicalconditionid[i]);
    }
}

function toImg(chartContainer, i, id) {
    var field = document.createElement("input");
    field.type = "hidden";
    field.id = "img_code" + i;
    field.name = "imgcode";
    document.getElementById("dynamicText").appendChild(field);
    document.getElementById('img_code' + i).value = id + "_" + getImgData(chartContainer);
    i++;
}

function getImgData(chartContainer) {

    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
    var svg = chartArea.innerHTML;
    var doc = chartContainer.ownerDocument;
    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);
    canvas.setAttribute(
        'style',
        'position: absolute; ' +
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
    doc.body.appendChild(canvas);
    canvg(canvas, svg);
    var imgData = canvas.toDataURL("image/png");
    canvas.parentNode.removeChild(canvas);
    return imgData;
}

I'm getting a Line: 85 Error: 'getElementsByTagName(...).0.parentNode' is null or not an object error in IE8.

回答1:

I found in IE8 there is no support for svg or canvas element, so the javascript charting libraries like google charts, D3 and jqplot convert the charts to vml format so we cant to get the byte code as like above code. In my application google chart can produce image format charts that is deprecated but i used this image chart and send the image url to action class and convert the url to image. Refer this link for google image charts