Если тег выбора включен в создание URL-адреса с помощью html2canvas, начальная загрузка не работает в IE - PullRequest
Новая
       52

Если тег выбора включен в создание URL-адреса с помощью html2canvas, начальная загрузка не работает в IE

0 голосов
/ 11 февраля 2019

Если в создание URL-адреса с помощью html2canvas включен тег выбора, начальная загрузка не работает в IE.

Это нормально для chrome и firefox.

используйте bootstarp 3.4.0, html2canvas 0.5.0-alpha1

Использовать тег выбора> https://jsfiddle.net/hyeon1124/61ujzfv2/

введите описание изображения здесь 

<div class="row" id="testDownload">
  <div class="col-md-3">
      <select>
        <option>111</option>
        <option>222</option>
        <option>333</option>
      </select>
  </div>
  <div class="col-md-3" style="background-color: blue;">
    1234
  </div>
  <div class="col-md-3" style="background-color: red;">
    5472
  </div>
  <div class="col-md-3" style="background-color: green;">
    9999
  </div>
</div>

Не использовать Выберите тег> https://jsfiddle.net/hyeon1124/7qmhe2xL/

введите описание изображения здесь 

<div class="row" id="testDownload">
  <div class="col-md-3" style="background-color: blue;">
    1234
  </div>
  <div class="col-md-3" style="background-color: red;">
    5472
  </div>
  <div class="col-md-3" style="background-color: green;">
    9999
  </div>
</div>

js common 

$('#capture-btn').click(function(){
    var targetElem = $('#testDownload');
    var svgElem = targetElem.find('svg');
    svgElem.each(function () {
        var canvas, xml;
        canvas = document.createElement("canvas");
        canvas.className = "screenShotTempCanvas";
        xml = (new XMLSerializer()).serializeToString(this);
        xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
        canvg(canvas, xml);
        $(canvas).insertAfter(this);
        $(this).attr('class', 'tempHide');
        $(this).hide();
    });
html2canvas(targetElem, {
    allowTaint: false,
    useCORS: true,
    background: '#fff',
    logging: false,
    onrendered: function(canvas) {
        var canvasWidth = $(canvas).attr('width');
        var canvasHeight = $(canvas).attr('height');
        var targetWidth = targetElem.width();
        var targetHeight = targetElem.height();
        var crop = { w: canvasWidth - targetWidth, h: canvasHeight - targetHeight };
        var cropCanvas = document.createElement("canvas");
        cropCanvas.setAttribute('width', targetWidth);
        cropCanvas.setAttribute('height', targetHeight);
        var ctx = cropCanvas.getContext('2d');
            ctx.webkitImageSmoothingEnabled = false;
            ctx.mozImageSmoothingEnabled = false;
            ctx.imageSmoothingEnabled = false;
            ctx.drawImage(canvas,
                0,//crop.w > 0 ? -(crop.w) : 0,
                0,//crop.h > 0 ? -(crop.h) : 0,
                        targetWidth,
                        targetHeight
            );
        // Download to PDF ..
        var imgData = cropCanvas.toDataURL('image/jpeg');
  $('#imgTest').attr("src", imgData);
    }
});
});
...