如何检测canvas父div的Bootstrap类 按col-sm属性动态设置画布尺寸

问题原因 #

原有判断逻辑的错误在于，document.querySelector('.col-sm-12')是检索整个文档内是否存在任意col-sm-12类的元素，而非判断当前canvas的父容器是否是col-sm-12，因此判断结果完全不符合预期。

解决方案 #

使用Element.closest()方法，从当前canvas元素向上遍历所有祖先节点，匹配最近的符合类名规则的元素，即可准确判断所处容器的类。

完整实现代码 #

单个指定ID的画布版本

// 替换为你实际的canvas ID，比如canvas-id-1或canvas-id-2
let canvas = document.getElementById('canvas-id-1');
let ctx = canvas.getContext("2d");

// 核心判断：向上找最近的col-sm-12祖先元素
if (canvas.closest('.col-sm-12')) {
  canvas.width = 800;
  canvas.height = 400;
} else {
  canvas.width = 500;
  canvas.height = 400;
}

var image = new Image();
// 替换为你实际的图片地址
image.src = 'http://t2.gstatic.com/images?q=tbn:ANd9GcQQveW9AJCxOC8Phnq3vptJIxPFHlxNw63q4pudc66dM4O96vtm';
image.onload = function () {
  ctx.drawImage(image,
    canvas.width / 2 - image.width / 2,
    canvas.height / 2 - image.height / 2
  );
}

批量处理所有.image-canvas类画布版本

如果页面上有多个画布，不用逐个指定ID，可直接批量处理：

document.querySelectorAll('.image-canvas').forEach(canvas => {
  const ctx = canvas.getContext("2d");
  // 自动判断容器类设置尺寸
  canvas.width = canvas.closest('.col-sm-12') ? 800 : 500;
  canvas.height = 400;

  const image = new Image();
  // 可根据canvas的自定义属性、ID等匹配对应图片地址
  image.src = '对应画布的图片地址';
  image.onload = () => {
    ctx.drawImage(image,
      canvas.width / 2 - image.width / 2,
      canvas.height / 2 - image.height / 2
    );
  };
});

兼容老浏览器的替代方案 #

如果需要兼容不支持closest方法的旧版浏览器，可以自己实现父级类名判断逻辑：

function checkParentHasClass(element, className) {
  let currentEl = element;
  while (currentEl) {
    if (currentEl.classList?.contains(className)) {
      return true;
    }
    currentEl = currentEl.parentElement;
  }
  return false;
}

// 调用方式
const isInCol12 = checkParentHasClass(canvas, 'col-sm-12');

内容的提问来源于stack exchange，提问作者David