我正在开发一个应用程序,允许用户裁剪图像并为图像选择边框。 我想知道的是,如果它有可能通过JavaScript将带有边框样式的图像转换为base64?将图像转换为Base64包括其边框图像样式
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
var pat = canvasContext.createPattern(img,"repeat");
canvasContext.strokeStyle = pat;
canvasContext.lineWidth = 5;
canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height);
上面的代码只是在画布上添加了一个黑色边框。
现在,我想要做的是添加一个图像/图案作为边框到画布。
更新:根据@ K3N的回答,我创建了裁剪图像的新画布,并增加了图案的边框。为我的需求工作。
绝对有可能。您可以将边框和图像绘制到画布上(您可能需要创建具有考虑边框尺寸的画布上下文),然后使用类似方法将其导出到Cropit。 – Dan
感谢您的回复。我的主要问题是需要添加一个CSS边框图像到裁剪后的图像并导出到base64。我可以在画布上添加一个简单的边框,但是我想添加更复杂的图案作为边框。我将如何实现这一目标?我更新了我的问题。 – Ricky
在CSS中这样做没有意义。你将不得不模仿CSS样式(因为你不能将位图直接保存在DOM元素或样式之外),并且仍然将其传输到画布(包含所有包含的挑战),因此只需将边框直接添加到画布而不需要围绕使用CSS的大圆圈。 – K3N