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

-1

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

来源

2017-03-09 Ricky

绝对有可能。您可以将边框和图像绘制到画布上（您可能需要创建具有考虑边框尺寸的画布上下文），然后使用类似方法将其导出到Cropit。 – Dan

感谢您的回复。我的主要问题是需要添加一个CSS边框图像到裁剪后的图像并导出到base64。我可以在画布上添加一个简单的边框，但是我想添加更复杂的图案作为边框。我将如何实现这一目标？我更新了我的问题。 – Ricky

在CSS中这样做没有意义。你将不得不模仿CSS样式（因为你不能将位图直接保存在DOM元素或样式之外），并且仍然将其传输到画布（包含所有包含的挑战），因此只需将边框直接添加到画布而不需要围绕使用CSS的大圆圈。 – K3N

我会建议直接用帆布做这个。由于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';

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

来源

2017-03-09 19:47:12 K3N

谢谢@ K3N，它现在的工作:)我注意到的是图像不与边界宽度成正比。有没有办法做到这一点？换句话说，使que模式的图像调整到边框宽度？例如：http://imgur.com/sV35utX – Ricky

@Ricky较新的浏览器支持setTransform模式对象，它允许你f.ex.在应用之前缩放模式。你可以尝试'var f = dstWidth/img.width; pat.setTransform（f，0,0，f，0,0）;'（如果需要的话，对于y）。如果浏览器不支持，则必须以所需的图案大小制作屏幕外画布，然后按比例绘制图像，然后将该画布用作图案源。 – K3N

我试图使用setTransform（）函数，但我收到以下错误：.setTransform不是一个函数（我在Chrome上测试它）。无论哪种方式，我已经标记你的答案是正确的，因为它解决了我的主要问题:) – Ricky

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

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

我没有非的jQuery版本的权利，但Croppie是体面的。

来源

2017-03-09 13:53:57

感谢您的回复。我试过这个插件，但无法使用AngularJS正常工作，所以我使用了Cropit。尽管如此，我的问题不是图像裁剪插件，但如何将一个图像的CSS边框图像样式转换为base64。更新我的问题。 – Ricky

@ricky - 抱歉，我知道，结合croppie文件是有点麻烦，但是，我知道有一个''为NG-1.4.x' –

ngcroppie'指令我试过指令，但版本1.6.x似乎存在一些问题。我将仔细看看未来项目的模块:) – Ricky

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

回答

相关问题