JavaScript使用qrcode.js生成二维码，html2canvas生成海报

最新推荐文章于 2024-04-30 14:03:04 发布

supramolecular

最新推荐文章于 2024-04-30 14:03:04 发布

阅读量2.3k

点赞数 2

分类专栏： Javascript qrcode html2canvas

本文链接：https://blog.csdn.net/supramolecular/article/details/104297413

版权

Javascript 同时被 3 个专栏收录

12 篇文章 1 订阅

订阅专栏

qrcode

3 篇文章 0 订阅

订阅专栏

html2canvas

1 篇文章 0 订阅

订阅专栏

1.使用qrcode.js生成二维码

github上qrcode.js下载地址：https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="qrcode" style="    width:160px;
    height:160px;
    margin-top:15px;"></div>
</body>
<script src="./qrcode.js"></script>
<script type="text/javascript">
    var qrcode = new QRCode("qrcode", {
        text: "https://www.baidu.com/",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
</script>
</html>

2. 使用html2canvas生成图片

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html2canvas</title>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>

    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
    <h2>Canvas实现前端截图</h2>
</div>
<script>
    //直接生成canvas
    // html2canvas(document.querySelector("#capture")).then(canvas => {
    //     document.body.appendChild(canvas);
    // });
    //将canvas生成的图片转化为base64，提高清晰度
    html2canvas(document.querySelector("#capture")).then(canvas => {
        const dataUrl = canvas.toDataURL("image/png", 1.0);
        var newImg = document.createElement("img");
        newImg.src = dataUrl;
        document.body.appendChild(newImg);
    });
</script>
</body>
</html>

vue示例

        let dom = this.$refs.shareCard;
        html2canvas(dom).then((canvasObj) => {
          // Canvas2Image.saveAsImage(canvasObj, canvasObj.width, canvasObj.height, 'png', 'share');
          this.img = Canvas2Image.convertToImage(canvasObj, canvasObj.width, canvasObj.height);
          this.showImg = true;
          this.$refs.imgBox.appendChild(this.img);
        })

利用canvas对html进行截图处理，如果html中引用的图片是网络资源链接的话，就会导致图片部分是空白页面，（相对路径的本地图片则不存在这个问题）。可以利用JS将图片资源链接转化为base64图片解决这个问题（参考：https://juejin.im/post/5addf74551882567395459e1）

方法1

使用ajax技术，即XMLHttpRequest（XHR）对象与服务器交互（参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest），使用FileReader对象的readAsDataURL方法将blob流内容转化为base64字符串（文档参考https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader）, 同步和异步请求参考文档(https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests)，此处responseType设置为blob，一定要设置异步请求，否则报错（参考https://stackoverflow.com/questions/9855127/setting-xmlhttprequest-responsetype-forbidden-all-of-a-sudden）

function getBase64(imgUrl) {
  window.URL = window.URL || window.webkitURL;
  var xhr = new XMLHttpRequest();
  xhr.open("get", imgUrl, true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (this.status == 200) {
      var blob = this.response;
      let oFileReader = new FileReader();
      oFileReader.onloadend = function (e) {
        let base64 = e.target.result;
        console.log(base64)
      };
      oFileReader.readAsDataURL(blob);
    }
  }
  xhr.send();
}
getBase64("http://p1.pstatp.com/large/435d000085555bd8de10");

方法2

使用canvas.toDataURL()方法（参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL）

需要解决图片跨域问题 image.crossOrigin = '';

使用了Jquery库的$.Deferred(参考文档http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html)方法

//使用canvas.toDataURL()方法, Jquery库的$.Deferred()方法,需要解决图片跨域问题 image.crossOrigin = '';
    let imgSrc = "http://p1.pstatp.com/large/435d000085555bd8de10";
    function getCanvasBase64(img) {
        var image = new Image();
        image.crossOrigin = '';
        image.src = img;
        var deferred = $.Deferred();
        if (img) {
            image.onload = function () {
                deferred.resolve(getBase64Image(image));
                document.getElementById("container2").appendChild(image);
            }
            return deferred.promise();
        }
    }
    getCanvasBase64(imgSrc).then(function (base64) {
        console.log(base64);
    }, function (err) {
        console.log(err);
    });

另外对包含有svg的，html2canvas也无法处理，需要创建临时div，转换为canvas，同时删掉原来的svg元素

示例

  handleGenerator() {
        // 最外层的容器
        // this.show1 = true;
        let treeContainnerElem = document.getElementById('tree-containner');
        // 要导出div
        let treeElem = document.getElementById("tree");


        this.imgheight = treeElem.offsetHeight;
        console.log(treeElem.offsetHeight, treeElem.offsetWidth);
        // this.show1 = false;
        // 从要导出的div克隆的临时div
        let tempElem = treeElem.cloneNode(true);
        tempElem.id = 'temp-tree';
        tempElem.className = 'fff';
        tempElem.style.width = treeElem.clientWidth + 'px';
        tempElem.style.height = treeElem.clientHeight + 'px';
        let hinttext =  tempElem.querySelector("#hinttext");
        tempElem.removeChild(hinttext);
        treeContainnerElem.appendChild(tempElem);
        // 在临时div上将svg都转换成canvas，并删除原有的svg节点
        let svgElem = tempElem.querySelectorAll("svg");
        svgElem.forEach((node) => {
          let parentNode = node.parentNode;
          let svg = node.outerHTML.trim();
          let canvas = document.createElement("canvas");
          canvas.style.height = "13.3px";
          canvas.style.width = "20px";
          canvg(canvas, svg);
          canvas.style.zIndex = 9;
          if (node.style.position) {
            canvas.style.position += node.style.position;
            canvas.style.left += node.style.left;
            canvas.style.top += node.style.top;
          }
          parentNode.removeChild(node);
          parentNode.appendChild(canvas);
        });
        html2canvashtml2canvas(tempElem, {
          useCORS: true, // 允许CORS跨域
          backgroundColor: '#D6E9FF',
        }).then(canvas => {
          // let img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "");
          let img = canvas.toDataURL("image/jpeg")
          treeContainnerElem.removeChild(tempElem);
          this.imgUrl = img;
        })
      },

supramolecular

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript使用qrcode.js生成二维码，html2canvas生成海报

1.使用qrcode.js生成二维码github上qrcode.js下载地址：https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录