时间戳

首页 > 解决方案 > 如何在使用画布绘制为图像时保留内部 div 的阴影？

reactjs - 如何在使用画布绘制为图像时保留内部 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();

我现在得到的结果是： 在此处输入图像描述

标签： reactjshtml5-canvashtml2canvasdrawimage

解决方案

这是我如何实现它的。

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

推荐阅读