jspdf : add image to pdf but abobe reader can't read the file?
<p>I am using jspdf in my project to convert some charts to a pdf. My framework is <strong>angularjs 1.5.6</strong>, the chart is generated by <strong>chart.js</strong>. The html fragment is as below:</p>

<pre><code>&lt;div name="charts" class="charts"&gt;

    &lt;div class="ft" style="width:45%; height:550px; margin-top: 20px;margin-left:2%;"&gt;
        &lt;canvas id="biChart" class="chart chart-bar" chart-data="biData" chart-labels="biLabels" chart-options="biOptions" chart-series="series" chart-colors="biColors" chart-dataset-override="biDatasetOverride"&gt;&lt;/canvas&gt;
    &lt;/div&gt;

    &lt;div class="fr" style="width:45%; height:550px; margin-top: 20px;margin-right:2%;"&gt;
        &lt;canvas id="qzsChart" class="chart chart-bar" chart-data="qzsData" chart-labels="qzsLabels" chart-options="qzsOptions" chart-series="series" chart-colors="qzsColors" chart-dataset-override="qzsDatasetOverride"&gt;&lt;/canvas&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>The export function is as below:</p>

<pre><code>$scope.exportChart = function() {
        var biChart = document.getElementById("biChart");
        var qzsChart = document.getElementById("qzsChart");
        var doc = new jsPDF('p', 'mm');
        var text = "Sample Charts";
        var xOffset = (doc.internal.pageSize.width / 2) - (doc.getStringUnitWidth(text) * doc.internal.getFontSize() / 2);
        doc.text(text, xOffset, 10);
        doc.addImage(biChart.toDataURL('image/png'), 'PNG', 10, 10);
        doc.addPage();
        doc.addImage(qzsChart.toDataURL('image/png'), 'PNG', 10, 10);
        doc.save('sample-chart.pdf');
    }
</code></pre>

<p>Now the result is , I can see the generated pdf in browser. However, when I use adobe reader to open the file, it said:</p>

<p><a href="https://i.stack.imgur.com/OwDkp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OwDkp.jpg" alt="open wrong message"></a></p>

<p>Anything wrong with my codes?</p>