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

问题描述

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

我试图在使用 HTML 画布将此 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();

我现在得到的结果：

解决方法

这是我如何实现的。

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,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);