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

【问题标题】：Convert Image to Base64 Including its Border Image Style将图像转换为 Base64，包括其边框图像样式
【发布时间】：2017-03-27 17:40:53
【问题描述】：

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

【问题讨论】：

绝对有可能。您可以将边框和图像绘制到画布上（您可能需要在考虑边框大小的情况下创建画布上下文），然后使用与 Cropit 类似的方法导出。
感谢您的回复。我的主要问题是想要将 css 边框图像添加到裁剪图像并将全部导出到 base64。我可以在画布上添加一个简单的边框，但我想添加更复杂的图像图案作为边框。我将如何做到这一点？我更新了我的问题。
在 CSS 中这样做是没有意义的。您将不得不模拟 CSS 样式（因为您不能直接从 DOM 元素或样式中保存位图）并仍然将其传输到画布（包含所有挑战），因此只需将边框直接添加到画布而不需要使用 CSS 大圆圈。
@k3n 感谢您的回复。如何将图像图案作为边框添加到画布？更新了我的问题。

标签： javascript css base64 border-image

【解决方案1】：

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

您可以在画布中使用图案，但等待图像加载很重要。图像加载是异步的，在调用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';

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

【讨论】：

感谢@K3N，它现在可以工作了:) 我注意到图像与边框宽度不成比例。有没有办法做到这一点？换句话说，让阙图案的图像适应边框宽度？示例：imgur.com/sV35utX
@Ricky 较新的浏览器支持模式对象上的 setTransform，它允许您进行 f.ex。在应用之前缩放图案。你可以试试var f = dstWidth / img.width; pat.setTransform(f,0,0,f,0,0);（如果需要的话也可以试试）。如果浏览器不支持，您必须以所需的图案大小制作屏幕外画布，然后按比例绘制图像，然后将该画布用作图案源。
我尝试使用 setTransform() 函数，但出现以下错误：.setTransform 不是函数（我正在 Chrome 上测试它）。无论哪种方式，我都将您的答案标记为正确的答案，因为它解决了我的主要问题:)
@Ricky 是的，可能有点early for it（奇怪的是，Opera 使用相同的 Blink 引擎支持它）。但在这种情况下，只需使用其他方法。

【解决方案2】：

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

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

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

【讨论】：

感谢您的回复。我尝试了这个插件，但无法让它与 AngularJS 一起正常工作，所以我选择了 Cropit。尽管如此，我的问题不是图像裁剪插件，而是如何将具有 css 边框图像样式的图像转换为 base64。更新了我的问题。
@ricky - 很遗憾听到这个消息，我知道将文件绑定到croppie 有点麻烦，但是，我知道ng-1.4.x 有一个ngcroppie 指令
我尝试了该指令，但它似乎与版本 1.6.x 有一些问题。我将仔细研究未来项目的模块:)
感谢您让我知道 - 将来可能必须升级到 1.6 - 所以提前知道很好