Android 7.0 or later HTML2Canvas cannot get internal Canvas content

For problems encountered in the project, the active page generates two-dimensional code, and then html2Canvas and background div are used to generate pictures and save them locally in the mobile phone. As a result, in some android models, only the background is saved, without the QR code generated by QrCanvas. After preliminary testing, this problem was found mainly in Android 7.0 and later versions.

The initial guess of the problem is that Android 7.0 or later html2Canvas cannot get the contents of the internal Canvas element.

Original problematic code:

created() {
    let that = this;
    that.$nextTick(function () {
        var canvas1 = qrcanvas({
            data: decodeURIComponent(that.$route.query.url), // Share link (as required) size:128 // qr code size}); document.getElementById("qrcode").innerHTML = ' ';
        document.getElementById('qrcode').appendChild(canvas1); })}Copy the code

It is found that the background image of the IMG package does not have the problem that html2Canvas cannot get the active shared image

Solutions are as follows:

created() {
    let that = this;
    that.$nextTick(function () {
        var canvas1 = qrcanvas({
            data: decodeURIComponent(that.$route.query.url), // Share link (as required) size:128 // qr code size}); const tempImg = document.createElement('img');
        tempImg.src = canvas1.toDataURL();
        document.getElementById("qrcode").innerHTML = ' ';
        document.getElementById('qrcode').appendChild(tempImg); })}Copy the code

The test can solve the existing problems. It’s unclear why Android 7.0 and above has this problem.