当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 运用html2canvas.js将div导出为图片，适用所有浏览器兼容性

运用html2canvas.js将div导出为图片，适用所有浏览器兼容性

2020年07月17日  | 移动技术网IT编程  | 我要评论

首先引入html2canvas.js。

公共方法

/**
 * 导出div图片公共方法
 * @param id div的id
 * @param name 导出名称
 * @param scale 方大倍数
 */
function downLoadCanvasPicture(id,name,scale){
  var imgUri = "";
  var shareContent = document.getElementById(id);
  var width = shareContent.offsetWidth; //获取dom 宽度
  var height = shareContent.offsetHeight; //获取dom 高度
  var canvas = document.createElement("canvas"); //创建一个canvas节点
 // var scale = 5; //定义任意放大倍数 支持小数
  var offsetTop = shareContent.offsetTop;
  canvas.width = width * scale; //定义canvas 宽度 * 缩放
  canvas.height = (height + offsetTop) * scale; //定义canvas（高度 +偏移量 ）*缩放
  canvas.getContext("2d").scale(scale, scale);
  var context = canvas.getContext('2d');
  var rect = $("#"+id).get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
  context.translate(-rect.left, -rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
  html2canvas(shareContent, {
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    width: width, //dom 原始宽度
    height: height,
    onrendered: function (canvas) {
      //生成base64图片数据
      imgUri = canvas.toDataURL("image/png", 1.0);
      var $a = document.createElement('a');
      var type = 'png';
      let mb = myBrowser();
      //Firefox 默认末尾不带.png
      if(mb == "FF"){
        name +='.png';
      }
      $a.download = name;
      $a.target = '_blank';
      $a.href = imgUri;
      // Chrome and Firefox
      if (navigator.msSaveBlob) {
        var blob_ = dataURLtoBlob(imgUri); // 用到Blob是因为图片文件过大时，在一部风浏览器上会下载失败，而Blob就不会
        var url;
        url = {
          name: name, // 图片名称不需要加.png后缀名
          src: blob_
        };
        window.navigator.msSaveBlob(url.src, url.name + '.png')
      } else {
        var evt = new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: false
        });
        $a.dispatchEvent(evt);
      }

    }
  });
}

/**
 * 图片下载url转为blob
 * @param dataurl
 * @returns {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});
}

function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
 		return "Chrome";
	}
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}

本文地址：https://blog.csdn.net/qq_39019765/article/details/107352761

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网