<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        #qianduanwz {
            width: 900px;
            height: 383px;
            text-align: center;
        }
        #qianduanwz img {
            width: 200px;
            margin-top: 60px;
        }

    </style>
</head>

<body>
    <div id="qianduanwz">
        <p>Learning the Web front End<br>canvas</p>
    </div>
    <img class="image" src="" alt="">
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        html2canvas(document.getElementById('qianduanwz'), {
            allowTaint: true.useCORS: true
        }).then(function (canvas) {
            document.body.appendChild(canvas);
            setTimeout(() = > {
                let url = canvas.toDataURL('image/png')
                var url1 = dataURLtoBlob(url)
                console.log(url1)
                console.log(getObjectURL(url1))
                document.getElementsByClassName("image") [0].src = getObjectURL(url1)
            }, 0)});function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(', '),
                mime = arr[0].match(/ : (. *?) ; /) [1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL ! = =undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL ! = =undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL ! = =undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</body>

</html>
Copy the code

Using html2canvas plug-in html2canvas.hertzen.com/dist/html2c…

 <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
Copy the code

Using the plug-in

  html2canvas(document.getElementById('qianduanwz'), {
 	/ /... options
   }).then(function (canvas) {
       document.body.appendChild(canvas);
       setTimeout(() = > {
           let url = canvas.toDataURL('image/png')
           var url1 = dataURLtoBlob(url)
           console.log(url1)
           console.log(getObjectURL(url1))
           document.getElementsByClassName("image") [0].src = getObjectURL(url1)
       }, 0)});Copy the code

Convert Base64 to BLOB

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(', '),
    mime = arr[0].match(/ : (. *?) ; /) [1],
       bstr = atob(arr[1]),
       n = bstr.length,
       u8arr = new Uint8Array(n);
   while (n--) {
       u8arr[n] = bstr.charCodeAt(n);
   }
   return new Blob([u8arr], { type: mime });
}
Copy the code

Blob transformation cost address

function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL ! = =undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL ! = =undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL ! = =undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
   return url;
}
Copy the code

Content is typically sent to the background in both Base64 and BLOB formats

There is a crossover problem if you want to add an image to a canvas and then generate a canvas and export the image