canvas生成图片转化成base64转化成blob转化成本地地址


<html lang="en">

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

    style>
head>

<body>
    <div id="qianduanwz">
        <p>学习Web前端<br>canvasp>
    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>

使用html2canvas插件http://html2canvas.hertzen.com/dist/html2canvas.min.js

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

使用该插件

  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)
   });

将base64转化成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 });
}

blob转化成本地地址

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;
}

通常会向后台发送 base64 和 blob这两种格式内容

如果要在画布中添加图片然后生成一个canvas然后导出图片的话会产生跨越问题

你可能感兴趣的:(js,nodejs,canvas)