将图像转换为 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);

上面的代码只是给canvas.

添加了一个黑边

现在，我想要做的是添加一个 image/pattern 作为 canvas 的边框。

更新：根据@K3N 的回答，我用裁剪后的图像创建了一个新的 canvas 并添加了图案边框。满足我的需求。

Answer 1

尝试使用 Croppie，它是一个 jQuery 插件，结果提供 base64 裁剪图像。

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

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

Answer 2

我建议直接使用 canvas 执行此操作。由于 DOM+CSS 无法作为位图轻松传输以在 canvas 中绘制，因此您不妨直接绘制到 canvas 而不是模拟 CSS ] 样式并最终在 canvas 上绘制。

您可以在 canvas 中使用图案，但等待图像加载很重要。图像加载是异步的，在调用 createPattern() 时图像可能不会被加载和解码，这将创建一个空模式。只需使用加载事件即可确定：

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

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

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

Convert Image to Base64 Including its Border Image Style

javascript

css

base64

border-image