如何在使用 canvas 绘制图像时保留内部 div 的阴影？

Question

在 UI 中，我有一个 div，其中包含博文的预览文本。

我试图在使用 HTML canvas 将此 div 元素绘制为图像时保持框阴影。我怎样才能做到这一点？

我用来绘制图像的代码：

let scaledElement = document.getElementById("screenRef");
let canvas = await html2canvas(scaledElement);
let croppedCanvas = document.createElement("canvas");
let croppedCanvasContext = croppedCanvas.getContext("2d");
let cropPositionTop = 0;
let cropPositionLeft = 0;
let cropWidth = canvas.width;
let cropHeight = canvas.height;
croppedCanvas.width = cropWidth;
croppedCanvas.height = cropHeight;
croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
let dataUrl = croppedCanvas.toDataURL();

我现在得到的结果是：

Answer 1

我是这样实现的。

let croppedCanvas = document.createElement("canvas");
let croppedCanvasContext = croppedCanvas.getContext("2d"); // init data

let cropPositionTop = CANVAS.OFFSET_POSITION;
let cropPositionLeft = CANVAS.OFFSET_POSITION;
let cropWidth = canvas.width;
let cropHeight = canvas.height;
croppedCanvas.width = cropWidth + CANVAS.PADDING; //for getting space around main image
croppedCanvas.height = cropHeight + CANVAS.PADDING; //for getting space around main image
var grd = croppedCanvasContext.createLinearGradient(
  CANVAS.START_X,
  CANVAS.START_Y,
  croppedCanvas.width,
  croppedCanvas.height
);
grd.addColorStop(colorStop.stop, colorStop.color);
croppedCanvasContext.fillStyle = grd;
croppedCanvasContext.fillRect(
  CANVAS.START_X,
  CANVAS.START_Y,
  croppedCanvas.width,
  croppedCanvas.height
);
croppedCanvasContext.shadowOffsetX = CANVAS.START_X;
croppedCanvasContext.shadowOffsetY = CANVAS.START_Y;
croppedCanvasContext.shadowBlur = CANVAS.SHADOW_BLUR;
croppedCanvasContext.shadowColor = CANVAS.SHADOW_COLOR;
croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);

如何在使用 canvas 绘制图像时保留内部 div 的阴影？

How to persist shadow of an inner div while drawing as image using canvas?

reactjs

html5-canvas

html2canvas

drawimage