-1

我正在开发一个允许用户裁剪图像并为该图像选择边框的应用程序。我想知道的是，是否可以通过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 的回答，我创建了一个带有裁剪图像的新画布并添加了图案边框。为我的需要工作。

4

2 回答 2

1

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

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

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

在此处输入图像描述

于 2017-03-09T13:53:57.957 回答
1

我建议直接使用画布进行此操作。由于 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';

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

于 2017-03-09T19:47:12.160 回答