处理angular tinymce编辑器插入或粘贴base64编码的图片形式并且编码字符串过长如何在前端或者后端进行压缩处理

Question

处理angular tinymce编辑器中的图片粘贴或者插入时，如果图片是base64编码的形式并且编码字符串过长如何在前端或者后端进行压缩处理

Value = Content;
result = await this.dataService.Action(Table, Column, Value);
async Action(Table: string, Column: string, Value: string): Promise<any> {
    let params = new Model();
    params.Table = Table;
    params.Column = Column;
    params.Value = Value;
    params.SEQ = sSEQ;=
    let content = JSON.stringify(params);
    const rlt = await this.httpc.post(this.api.apiUrl, content, {headers: new HttpHeaders().set('Content-Type', 'application/json')}).toPromise();
    result = JSON.parse(JSON.stringify(rlt ));
    return result;
  }

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

处理 Angular 中使用 TinyMCE 编辑器插入或粘贴 base64 编码的图片，并且针对编码字符串过长的问题，可以通过前端和后端两种方式进行压缩处理。这里为你提供两种方案：

前端处理：

在前端，你可以尝试使用 JavaScript 对图片进行压缩，然后转换为 base64 编码。TinyMCE 提供了一些插件来处理图片上传和粘贴，你可以使用这些插件或者自定义逻辑来处理图片。这里提供一种简化的流程：

1. 监听 TinyMCE 的 paste 或者 FileDrop 事件。
2. 当检测到粘贴或插入的图片时，使用 JavaScript 对图片进行压缩处理。可以使用像 canvas 和 Jimp 这样的库来实现图片压缩。
3. 将压缩后的图片转换为 base64 编码。
4. 使用 TinyMCE 的 API 将压缩后的图片插入到编辑器中。

例如，使用 canvas 进行前端图片压缩的示例代码：

function compressImage(file, quality, callback) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        try {
            const base64Data = canvas.toDataURL('image/jpeg', quality); // 调整质量参数进行压缩
            callback(base64Data); // 返回压缩后的 base64 数据
        } catch (e) {
            console.error('压缩失败', e);
        }
    };
    img.src = URL.createObjectURL(file); // 使用 URL 创建图片对象以便加载文件内容
}

然后在 TinyMCE 的事件处理函数中调用此函数来压缩图片并插入编辑器。

后端处理：

还有一种方式是后端处理，你可以在服务器端接收上传的图片文件，对其进行压缩处理后再转换为 base64 编码返回给前端。这种方式适合大型应用或者对安全性要求较高的场景。后端可以使用各种语言（如 Python、Java 等）和库来处理图片压缩。例如，Python 中可以使用 Pillow 库来处理图片压缩。这种方法需要在前端上传图片时发送请求到后端进行处理，然后后端返回压缩后的 base64 数据给前端，前端再将其插入到 TinyMCE 编辑器中。后端处理的代码会因语言和库的选择而异，可以根据你的实际需求进行选择和实现。总的来说，无论前端还是后端处理，都需要确保图片的压缩质量和性能之间的平衡。