将图像转换为Base64包括其边框图像样式

Question

我正在开发一个应用程序，允许用户裁剪图像并为该图像选择边框。 我想知道的是，如果可以通过Javascript将带边框样式的图像转换为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的回答，我创建了一个带有裁剪图像的新画布，并添加了一个图案边框。努力满足我的需求。

Answer 1

尝试使用Croppie，它是一个jQuery插件，可以提供base64裁剪后的图像。

https://foliotek.github.io/Croppie/

我现在没有非jquery版本，但Croppie很不错。

Answer 2

我建议直接用画布来做这个。由于DOM + CSS不能轻易地作为位图进行转换以便在画布中进行绘制，因此您可以直接绘制到画布而不是模拟CSS样式并最终在画布上进行绘制。

您可以在画布中使用模式，但等待加载图像非常重要。图像加载是异步的，在调用createPattern()时，图像可能无法加载和解码，这将创建一个空模式。只需使用load事件即可：

var img = new Image(), pat;
img.onload = function() {                            // wait for image to load
  pat = canvasContext.createPattern(this, "repeat"); // image is ready (here "this")
  canvasContext.strokeStyle = pat;
  canvasContext.lineWidth = 5;
  canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height);    
  // next step (if any) from here ...
};
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';

当然，这将适用于在应用边框之前绘制到画布的图像。因此，建议您预先加载画布所需的所有图像，以确保正确的绘制顺序。