Pintura编辑图片

文档地址: https://pqina.nl/pintura/docs/v8/

文档示例: https://pqina.nl/pintura/docs/v8/examples/absolute-font-size/

下载安装: https://pqina.nl/pintura/guide/

按钮添加示例

import {appendDefaultEditor, appendNode, createDefaultColorOptions, createNode} from '/static/pintura/pintura.js';

 //添加顶部按钮
        willRenderToolbar: (toolbar, env, redraw) => {
            const smileButtonClear = createNode('Button', 'smile-button_clear', {
                label: '清空',
                onclick: () => buttonNewImageClear(),
            });
            const smileButtonUpload = createNode('Button', 'smile-button_upload', {
                label: '上传',
                icon: '<rect x="0" y="0" width="24" height="24" fill="#ffd843"/>',
                onclick: () => buttonNewImageUpland(),
            });
            appendNode(smileButtonClear, toolbar);
            appendNode(smileButtonUpload, toolbar);
            return toolbar;
        },
       //贴纸的图纸下面添加按钮
        willRenderShapePresetToolbar: (nodes, addPreset) => {
             const smileButton = createNode('Button', 'smile-button', {
                 label: '添加标签',
                 onclick: () => addPreset('😄'),
             });
             appendNode(smileButton, nodes);
             return nodes;
        }

疑问: 怎么自定义左侧的按钮及事件