[英]Upload image at client side and convert it to base64 for generating html
I am composing an email body with the help of CKEDITOR. 我正在CKEDITOR的帮助下编写电子邮件正文。 I want to add an image in message body in it of base64 format. 我想在邮件正文中以base64格式添加图像。 So that I can send encoded image along the body without the need of storing image on a server. 这样我就可以沿着身体发送编码的图像,而无需将图像存储在服务器上。
I know can be achieved in in TinyMCE without sending on server. 我知道可以在TinyMCE中实现而无需在服务器上发送。 How can we achieve this in CKEDITOR? 我们如何在CKEDITOR中实现呢?
So far I have tried with 到目前为止,我已经尝试过
CKEDITOR.replace('editor1', {
//filebrowserBrowseUrl:'xx',
filebrowserUploadUrl: 'base64'
});
CKEDITOR.config.extraPlugins = "base64image";
I also have a method ready to convert url to base64 like 我也有准备好将url转换为base64的方法
function getBase64FromImageUrl(url) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
};
img.src = url;
}
You do not have to use canvas for that. 您不必为此使用画布。 Have a look at insertHtml . 看看insertHtml 。 I use this function within a custom plugin: 我在自定义插件中使用此功能:
function getBase64(fileData, editor)
{
var reader = new FileReader();
reader.addEventListener("load", function (e) {
var result = e.target.result;
if (editor)
{
editor.insertHtml('<img src="' + result + '">');
}
});
reader.readAsDataURL(fileData);
}
Edit: OP: "How CKEditor can pass values to this functions?" 编辑:OP:“ CKEditor如何将值传递给此函数?” In my case it is a simple plugin which constist of the getBase64-function, a modal (alike) dialog for getting/selecting the image path and its logic. 在我的情况下,它是一个简单的插件,由getBase64函数组成,是一个用于获取/选择图像路径及其逻辑的模态(类似)对话框。 Within this small dialog is a input: 在这个小对话框中是一个输入:
<input type="file" id="fileLoader" name="files" title="Load File" />
In the dialogs logic I get the file with this code: 在对话框逻辑中,使用以下代码获取文件:
var imagePath = null;
var fileLoader = $(this).find('#fileLoader');
if (fileLoader)
{
var fileData = null;
imagePath = fileLoader.val();
if (fileLoader.files && fileLoader.files[0]) {
fileData = fileLoader.files[0];
}
if (fileData == null) {
if (fileLoader.length && fileLoader.length > 0) {
fileLoader = fileLoader[0];
if (fileLoader.files && fileLoader.files[0]) {
fileData = fileLoader.files[0];
}
}
}
This file data you can pass to the getBase64 function. 您可以将此文件数据传递给getBase64函数。 You may also have a look on this simple plugin tutorial . 您也可以看看这个简单的插件教程 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.