t-comm/lib/dom-to-image/dom-to-image.js

专业、稳定、纯粹的工具库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var loader_loader = require('../loader/loader.js');
require('../loader/little-loader.js');

var html2canvasJSLink = 'https://image-1251917893.file.myqcloud.com/commjs/html2canvas.min.js';
/**
 * Dom转化为图片
 * @param {string} trigger  Dom的id
 * @param {string} imageElId  需要展示的图片的id
 *
 * @example
 * Dom2Image.convertDomToImage("app", "appImage");
 */
function convertDomToImage(trigger, imageElId, callback) {
  var opts = {
    useCORS: true,
    // y: window.pageYOffset // 解决scroll导致截图失败，
    backgroundColor: 'transparent'
  };
  var imgDom = document.getElementById(trigger);
  if (imgDom) {
    // 放大canvas，避免截图模糊
    var canvas = document.createElement('canvas');
    var scale = 3;
    var width = imgDom.offsetWidth;
    var height = imgDom.offsetHeight;
    canvas.width = width * scale;
    canvas.height = height * scale;
    opts.scale = scale;
    opts.canvas = canvas;
    opts.width = width;
    opts.height = height;
  }
  loader_loader.loadJS(html2canvasJSLink).then(function () {
    // eslint-disable-next-line no-undef
    var triggerDom = document.getElementById(trigger);
    if (triggerDom) {
      window === null || window === void 0 ? void 0 : window.html2canvas(triggerDom, opts).then(function (canvas) {
        var base64ImgSrc = canvas.toDataURL('image/png');
        var img = document.getElementById(imageElId);
        if (img) {
          img.src = base64ImgSrc;
        }
        if (callback && typeof callback === 'function') {
          callback(base64ImgSrc);
        }
      })["catch"](function (error) {
        console.warn('[convertDomToImage] error: ', error);
      });
    }
  });
}
/**
 * 解决图片跨域问题，将网络图片URL转为base64 URL。
 * @param {string} src 网络图片URL
 * @returns {Promise} Promise对象返回base64 URL
 *
 * @example
 * Dom2Image.urlToBase64("http://test.com/image.png").then(url=>{});
 */
function urlToBase64(src) {
  return new Promise(function (resolve) {
    var img = new Image();
    // 兼容不同格式的url，加随机数防止走缓存
    if (src.indexOf('?') === -1) {
      src = "".concat(src, "?t=").concat(new Date().getTime());
    } else {
      src = "".concat(src, "&t=").concat(new Date().getTime());
    }
    img.setAttribute('crossOrigin', 'anonymous');
    img.src = src;
    img.onload = function () {
      var canvas = convertImageToCanvas(img);
      var url = canvas.toDataURL('image/png');
      resolve(url);
    };
    img.onerror = function () {
      resolve('');
    };
  });
}
/**
 * image url转canvas
 * @param image {Image} 图片src
 * @returns canvas
 */
function convertImageToCanvas(image) {
  var _a;
  var canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.dpi = window.devicePixelRatio;
  (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(image, 0, 0, image.width, image.height);
  return canvas;
}

exports.convertDomToImage = convertDomToImage;
exports.convertImageToCanvas = convertImageToCanvas;
exports.urlToBase64 = urlToBase64;