通过qrcodejs2和html2canvas把iframe中的内容生成带二维码的海报长图片

　import $ from 'jquery';

import html2canvas from 'html2canvas';
import QRCode from 'qrcodejs2';

/**
 * 生成长图
 */
export function createLonggraph() {
  const htmlcanvasContainer = $('#dropInnerIframe').contents().find('#magicalDragScene');
  const html = '<div id="qrCode" class="qrconde"  style="width: 200px;height: 200px; display: none;margin: 30px auto;"></div>';
  htmlcanvasContainer.append(html);
  const qrcodeContaier = document.getElementById('dropInnerIframe').contentWindow.document.getElementById('qrCode');
  const iframeContainer = document.getElementById('dropInnerIframe');
  const html2canvasContainer = document.getElementById('dropInnerIframe').contentWindow.document.getElementById('magicalDragScene');
  // let iframeContainer = document.getElementById('dropInnerIframe').contentWindow.document.getElementById('iframeBody');
  qrcodeContaier.style.display = 'block';
  const code = new QRCode(qrcodeContaier, {
    text: columnUrl,
    width: 200,
    height: 200,
    colorDark: '#333333', // 二维码颜色
    colorLight: '#ffffff', // 二维码背景色
    correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
  });
  iframeContainer.contentWindow.scrollTo(0, 0);
  html2canvas(html2canvasContainer, {
    useCORS: true,
    scale: 1
  }).then(canvas => {
    // this.$refs.addImage.append(canvas);//在下面添加canvas节点
    const link = document.createElement('a');
    const time = new Date().getTime();
    const base64url = canvas.toDataURL();
    link.href = base64url;// 下载链接
    // console.log('图片链接===========', encodeURIComponent(base64url));
    link.setAttribute('download', time + '.png');
    link.style.display = 'none';// a标签隐藏
    document.body.appendChild(link);
    link.click();
    uploadLonggraph({ fileStr: base64url });
  }).catch(error => {
    console.log(error);
  });
  qrcodeContaier.innerHTML = '';
  qrcodeContaier.style.display = 'none';
  htmlcanvasContainer.remove('#qrCode');
}

1，获取iframe中的内容容器。

2，在容器中添加二维码容器。

3，生成二维码。

4，生成带二维码的长图。

5，清除dom元素中的二维码。