javascript - 客户端上传图片并转base64生成html

Question

我正在 CKEDITOR 的帮助下撰写电子邮件正文。我想在消息正文中添加 Base64 格式的图像。这样我就可以沿着 body 发送编码图像，而不需要在服务器上存储图像。

我知道可以在 TinyMCE 中实现，而无需在服务器上发送。我们如何在 CKEDITOR 中实现这一目标？

到目前为止我已经尝试过

CKEDITOR.replace('editor1', {
   //filebrowserBrowseUrl:'xx',
   filebrowserUploadUrl: 'base64'
});
CKEDITOR.config.extraPlugins = "base64image";

我还有一个方法可以将 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;
}

Answer 1

您不必为此使用 Canvas 。看看insertHtml 。我在自定义插件中使用此函数:

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);
}

编辑:OP:“CKEditor 如何将值传递给此函数？”就我而言，它是一个简单的插件，由 getBase64 函数组成，这是一个用于获取/选择图像路径及其逻辑的模态(类似)对话框。在这个小对话框中有一个输入:

<input type="file" id="fileLoader" name="files" title="Load File" />

在对话框逻辑中，我使用以下代码获取文件:

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];
                    }
                }
            }

您可以将此文件数据传递给 getBase64 函数。您也可以看看这个简单的插件 tutorial .