海报制作banner 编辑器效果，做图神器，在线ps-html代码-BFW代码库

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var obj = null;
        bready(function() {

            use(["subjx", "subjx"], function() {


                $("#savebtn").click(function() {
                    if (obj != null) {
                        obj.disable();
                    }
                    var svgXml = $('#svg-container').prop('outerHTML');
                    if (svgXml == "") {
                        return;
                    }

                    // alert(svgXml);
                    $("#previewimg").attr("src", 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))));
                    return;
                    var image = new Image();
                    image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
                    $("body")[0].append(image);
                    return;
                });
                const htmlMethods = {
                    onInit(el) {
                        //console.log('init');
                    },
                    onMove() {
                        this.el.childNodes[1].innerHTML = 'Draggable';
                    },
                    onResize(dx,
                        dy,
                        handle) {
                        this.el.childNodes[1].innerHTML = 'Resizable';
                    },
                    onRotate(rad) {
                        this.el.childNodes[1].innerHTML = 'Rotatable';
                    },
                    onDrop(e,
                        el) {
                        //console.log('is dropped');
                    },
                    onDestroy(el) {
                        //console.log('is destroyed');
                    }
                };
                // create Observable instance
                const obs = subjx.createObservable();
                const svgOptions = {
                    container: '#svg-container',

                    proportions: false,
                    //rotationPoint: true,
                    // themeColor: 'white',
                    each: {
                        resize: true,
                        move: true,
                        rotate: true
                    },
                    snap: {
                        x: 20,
                        y: 20,
                        angle: 25
                    },
                    cursorMove: 'move',
                    cursorRotate: 'crosshair',
                    cursorResize: 'pointer',
                    //...htmlMethods
                };

                subjx('.drag-svg').on('click',
                    e => {
                        //
                        if (e.currentTarget.classList.contains('sjx-drag')) return;
                        if (obj != null) {
                            obj.disable();
                        }
                        const xDraggable = subjx(e.currentTarget).drag(svgOptions, obs)[0];
                        obj = xDraggable;
                        // adding event to controls
                        const controls = xDraggable.controls;
                        subjx(controls).on('blur', () => {
                            xDraggable.disable();
                        });
                    });
                $(".page").click(function() {
                    if (obj != null) {
                        //obj.disable();
                    }
                });
            });


        });
    </script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .page {
            height: 100vh;
            min-height: 100vh;
            width: 100vw;
            /* background-color: #000000c4; */
        }
        #svg-container {

            margin: 0 auto;
            overflow: hidden;

            box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 15px;

        }

    </style>
</head>
<body>
    <div class="page">
        <div id="menu">
            <h3>选拖动对象进行布局，在点击生成图片按钮</h3>
            <input type="button" value="生成图片" id="savebtn" />
        </div>
        <svg id="svg-container" width="260" height="500" style="background-color: grey;" version="1.1" xmlns="http://www.w3.org/2000/svg">

            <rect class="drag-svg" x="0" y="100" height="130" width="300" style="fill: #333333" />
            <!--<image class="drag-svg" x="0" y="0"-->
            <!--    width="200" height="126"-->
            <!--    xlink:href="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" />-->

         
          
            <g class="drag-svg"  >
                <path fill="#FF1D53" d="M82.8,40.7C74.9,19,50.7,20.8,42,37.4C33.1,21,8.9,19.5,1.3,41.3c-9.7,27.9,37.4,56.1,41.2,58.4
                    C46.3,97.4,92.9,68.5,82.8,40.7z" yFill="#FF1D53"></path>
                <g>
                    <path fill="#7C7A7A" d="M90,42.6c-1.3-0.4-8-2.8-14.4-6.8c-3.8-2.4-6.8-5.1-8.9-7.8c-2.8-3.7-4-7.5-3.5-11.5
                        c0.4-3.2,1.6-6,3.5-8.2c1.8-2,4.1-3.4,6.7-4c3.5-0.8,7.1-0.1,10.1,1.8c1.9-3,4.9-5.1,8.4-5.9c2.6-0.6,5.3-0.3,7.8,0.8
                        c2.6,1.1,4.9,3.2,6.6,5.9c2.1,3.4,2.7,7.4,1.7,11.9c-0.7,3.3-2.3,7-4.8,10.8C99.1,36.1,94,41,93,42l-1.3,1.2L90,42.6z" yFill="#7C7A7A"></path>
                    <path fill="#FFFFFF" d="M88.1,43.1c-1.3-0.4-8-2.8-14.4-6.8c-3.8-2.4-6.8-5.1-8.9-7.8c-2.8-3.7-4-7.5-3.5-11.5
                        c0.4-3.2,1.6-6,3.5-8.2c1.8-2,4.1-3.4,6.7-4c3.5-0.8,7.1-0.1,10.1,1.8c1.9-3,4.9-5.1,8.4-5.9c2.6-0.6,5.3-0.3,7.8,0.8
                        c2.6,1.1,4.9,3.2,6.6,5.9c2.1,3.4,2.7,7.4,1.7,11.9c-0.7,3.3-2.3,7-4.8,10.8c-4.1,6.4-9.2,11.3-10.2,12.3l-1.3,1.2L88.1,43.1z" yFill="#FFFFFF"></path>
                    <path fill="#333333" d="M89.5,42.5l-0.9-0.3c-0.1-0.1-0.1-0.1-0.2-0.1c-0.2-0.1-0.6-0.2-1.2-0.........完整代码请登录后点击上方下载按钮下载查看