海报制作banner 编辑器效果，做图神器，在线ps
代码语言：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.4c-0.1,0-0.2-0.2-0.1-0.3
c0-0.1,0.2-0.2,0.3-0.1c0.5,0.2,0.9,0.3,1.2,0.4c0.1,0.1,0.1,0.1,0.2,0.1l0.7,0.2l0.2-0.2c0.1-0.1,0.2-0.1,0.3,0
c0.1,0.1,0.1,0.2,0,0.3L89.5,42.5z M90.8,41.3c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3c0.3-0.3,0.6-0.6,0.9-0.9
c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3C91.4,40.7,91.1,41,90.8,41.3C90.8,41.3,90.8,41.3,90.8,41.3L90.8,41.3z M92.6,39.5
c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3c0.3-0.3,0.6-0.6,0.9-0.9c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3
C93.2,38.9,92.9,39.2,92.6,39.5C92.6,39.5,92.6,39.5,92.6,39.5L92.6,39.5z M94.3,37.7c-0.1,0.1-0.2,0.1-0.3,0
c-0.1-0.1-0.1-0.2,0-0.3c0.3-0.3,0.6-0.6,0.8-0.9c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3C94.9,37,94.6,37.3,94.3,37.7
C94.3,37.6,94.3,37.6,94.3,37.7L94.3,37.7z M95.9,35.7c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3c0.3-0.3,0.5-0.6,0.8-1
c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3C96.5,35.1,96.2,35.4,95.9,35.7C95.9,35.7,95.9,35.7,95.9,35.7L95.9,35.7z
M97.5,33.8c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3c0.3-0.3,0.5-0.7,0.8-1c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3
C98,33.1,97.8,33.4,97.5,33.8C97.5,33.8,97.5,33.8,97.5,33.8L97.5,33.8z M86.2,41.2c-0.1,0-0.1,0-0.2,0c-0.4-0.1-0.8-0.3-1.2-0.5
c-0.1,0-0.2-0.2-0.1-0.3c0-0.1,0.2-0.2,0.3-0.1l0,0c0.4,0.2,0.8,0.3,1.2,0.5c0.1,0,0.2,0.2,0.1,0.3C86.3,41.2,86.2,41.2,86.2,41.2
L86.2,41.2z M99,31.8c-0.1,0.1-0.2,0-0.3,0c-0.1-0.1-0.1-0.2,0-0.3c0.2-0.3,0.5-0.7,0.7-1c0.1-0.1,0.2-0.1,0.3-0.1
c0.1,0.1,0.1,0.2,0.1,0.3C99.5,31,99.3,31.4,99,31.8C99,31.7,99,31.8,99,31.8L99,31.8z M100.4,29.7c-0.1,0.1-0.2,0-0.3,0
c-0.1-0.1-0.1-0.2,0-0.2l0,0c0.2-0.3,0.4-0.7,0.6-1c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0.1,0.1,0.2,0.1,0.3l0,0c-0.2,0.3-0.4,0.7-0.6,1
L100.4,29.7C100.4,29.7,100.4,29.7,100.4,29.7L100.4,29.7z M83.9,40.3c-0.1,0-0.1,0-0.2,0c-0.4-0.2-0.8-0.3-1.2-0.5
c-0.1,0-0.2-0.2-0.1-0.3s0.2-0.2,0.3-0.1l0,0c0.4,0.2,0.8,0.3,1.1,0.5C83.9,40,84,40.1,83.9,40.3C83.9,40.2,83.9,40.3,83.9,40.3
L83.9,40.3z M101.7,27.6c-0.1,0.1-0.2,0-0.3,0c0-0.1-0.1-0.2,0-0.2c0.2-0.4,0.4-0.7,0.6-1.1c0.1-0.1,0.2-0.1,0.3-0.1
c0.1,0.1,0.1,0.2,0.1,0.3C102.1,26.7,101.9,27.1,101.7,27.6C101.7,27.5,101.7,27.5,101.7,27.6L101.7,27.6z M102.8,25.3
c-0.1,0.1-0.2,0-0.3,0c0-0.1-0.1-0.1,0-0.2c0.2-0.4,0.4-0.8,0.5-1.1c0-0.1,0.2-0.2,0.3-0.1c0.1,0,0.2,0.2,0.1,0.3
C103.3,24.5,103.1,24.9,102.8,25.3C102.9,25.3,102.9,25.3,102.8,25.3L102.8,25.3z M81.6,39.3c-0.1,0-0.1,0-0.2,0
c-0.4-0.2-0.8-0.4-1.1-0.5c-0.1-0.1-0.1-0.2-0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1l0,0c0.4,0.2,0.8,0.4,1.1,0.5
C81.7,39,81.7,39.1,81.6,39.3C81.6,39.2,81.6,39.3,81.6,39.3L81.6,39.3z M103.8,23c-0.1,0.1-0.2,0-0.3,0c0-0.1-0.1-0.1,0-0.2
c0.2-0.4,0.3-0.8,0.4-1.2c0-0.1,0.2-0.2,0.3-0.1s0.2,0.2,0.1,0.3l0,0C104.2,22.1,104.1,22.5,103.8,23C103.9,23,103.9,23,103.8,23
L103.8,23z M79.3,38.2c-0.1,0-0.1,0-0.2,0c-0.4-0.2-0.8-0.4-1.1-0.6c-0.1-0.1-0.1-0.2-0.1-0.3s0.2-0.1,0.3-0.1l0,0
c0.4,0.2,0.7,0.4,1.1,0.6C79.4,37.9,79.4,3.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0