使用fabric.js添加背景图片 [英] Add background image with fabric.js
本文介绍了使用fabric.js添加背景图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以通过使用输入类型=文件id =文件来添加图像，但希望能够上传可移动的图像并将其作为背景图像保留在其他所有图像之后。现在我可以添加一些东西并将其发送到后面，但移动它很困难，因为控件在画布上运行。任何帮助将不胜感激，在此先感谢。
//添加图片from localvar canvas = new fabric.Canvas（'c'）; //显示/隐藏文字controlscanvas.on（'object：selected'，function（e）{if（e.target.type ==='i-text' ）{document.getElementById（'textControls'）。hidden = false;}}）; canvas.on（'before：selection：cleared'，function（e）{if（e.target.type ==='i-text '）{document.getElementById（'textControls'）。hidden = true;}}）; document.getElementById（'file'）。addEventListener（change，function（e）{var file = e.target.files [0 ]; var reader = new FileReader（）; reader.onload = function（f）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{var oImg = img.set（{left ：0，顶部：0，角度：00，博rder：'＃000'，stroke：'＃F0F0F0'，//< - set this strokeWidth：40 //< - set this}）。scale（0.2）; canvas.add（oImg）.renderAll（）; // var a = canvas.setActiveObject（oImg）; var dataURL = canvas.toDataURL（{format：'png'，quality：1}）; }）; }; reader.readAsDataURL（file）;}）; //删除选中的objectwindow.deleteObject = function（）{var activeGroup = canvas.getActiveGroup（）; if（activeGroup）{var activeObjects = activeGroup.getObjects（）; for（让我在activeObjects中）{canvas.remove（activeObjects [i]）; } canvas.discardActiveGroup（）; canvas.renderAll（）; }}其他canvas.getActiveObject（）。remove（）;} //刷新页面函数refresh（）{setTimeout（function（）{location.reload（）}，100）;} //添加textfunction Addtext（）{canvas.add new fabric.IText（'Tap and Type'，{left：50，top：100，fontFamily：'helvetica neue'，fill：'＃000'，stroke：'#fff'，strokeWidth：.1，fontSize：45} ））;} //编辑Textdocument.getElementById（'text-color'）。onchange = function（）{canvas.getActiveObject（）。setFill（this.value）; canvas.renderAll（）;}; document.getElementById（'text-color'）。onchange = function（）{canvas.getActiveObject（）。setFill（this.value）; canvas.renderAll（）;}; document.getElementById（'text-bg-color'）。onchange = function（）{canvas.getActiveObject（）。setBackgroundColor（this.value）; canvas.renderAll（）;}; document.getElementById（'text-lines-bg-color'）。onchange = function（）{canvas.getActiveObject（）。setTextBackgroundColor（this.value）; canvas.renderAll（）;}; document.getElementById（'text-stroke-color'）。onchange = function（）{canvas.getActiveObject（）。setStroke（this.value）; canvas.renderAll（）;}; document.getElementById（'text-stroke-width'）。onchange = function（）{canvas.getActiveObject（）。setStrokeWidth（this.value）; canvas.renderAll（）;}; document.getElementById（'font-family'）。onchange = function（）{canvas.getActiveObject（）。setFontFamily（this.value）; canvas.renderAll（）;}; document.getElementById（'text-font-size'）。onchange = function（）{canvas.getActiveObject（）。setFontSize（this.value）; canvas.renderAll（）;}; document.getElementById（'text-line-height'）。onchange = function（）{canvas.getActiveObject（）。setLineHeight（this.value）; canvas.renderAll（）;}; document.getElementById（'text-align'）。onchange = function（）{canvas.getActiveObject（）。setTextAlign（this.value）; canvas.renderAll（）;}; radios5 = document.getElementsByName（fonttype）; // wijzig naar buttonfor（var i = 0，max = radios5.length; i
body {padding：10px 10px 10px 10px; font-family：HelveticaNeue;} canvas {border：1px solid＃bdc3c7; margin：10px 0px 0px 0px; / * background-image：url（images / bg.png）; * /}。myFile {position：relative;溢出：隐藏;向左飘浮; clear：left;}。myFile input [type =file] {display：block;位置：绝对; top：0;正确：0;不透明度：0; font-size：30px; filter：alpha（opacity = 0）;}。title {color：black;文字修饰：无; margin-bottom：20px; display：block;} hr {text-align：left; margin：30px auto 0 0; width：700px;} a：visited {text-decoration：none; color：＃000;} a：active {text-decoration：none; color：＃000;}
< script src = https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js\"></script><!DOCTYPE html>< html>< head> < meta charset =utf-8/> <标题>品牌< /标题> < link rel =stylesheettype =text / csshref =styles.css> < link rel =stylesheettype =text / csshref =icons / css / materialdesignicons.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script>< / head>< body> < label>< a style =text-decoration：none; < span class =mdi mdi-lightbulb-on-outline>品牌< / span>< / a>< / label>< br>< br> < label title =添加图片class =myFile>< span class =mdi mdi-image>新增相片< / span>& nbsp;< input type =fileid =file/>< / label> < a onclick =Addtext（）title =添加文字>< span class =mdi mdi-format-text>添加文本< / span>< / a>& emsp; < a onclick =sendSelectedObjectToFront（）title =将选择前置>< span class =mdi mdi-arrange-bring-forward>前< /跨度>< / A> < a onclick =sendSelectedObjectBack（）title =发送选择后退>< span class =mdi mdi-arrange-send-backward>回到< /跨度>< / A> < a onClick =deleteObject（）title =删除所选内容>< span class =mdi mdi-delete>删除< /跨度>< / A>&安培; EMSP; < a onclick =refresh（）title =新鲜开始>< span class =mdi mdi-shredder>全部清除< / span>< / a>& emsp; < a id =lnkDownloadtitle =保存>< span class =mdi mdi-download>保存和LT; /跨度>< / A> < div id =textControlshidden> < div id =text-wrapperdata-ng-show =getText（）> < div id =text-controls> < select id =font-family> < option value =arial> Arial< / option> < option value =HelveticaNeueselected> Helvetica Neue< / option> < option value =myriad pro> Myriad Pro< / option> < option value =美味> Delicious< / option> < option value =verdana> Verdana< / option> < option value =georgia>格鲁吉亚< / option> < option value =courier> Courier< / option> < option value =comic sans ms> Comic Sans MS< / option> < option value =impact>影响< / option> < option value =monaco>摩纳哥< / option> < option value =optima> Optima< / option> < option value =hoefler text> Hoefler Text< / option> < option value =plaster>石膏< / option> < option value =engagement> Engagement< / option> < /选择> < input type =colorid =text-colorsize =10> < select id =text-align> < option value =left>左对齐< / option> < option value =center>对齐中心< / option> < option value =right>右对齐< / option> < option value =justify>对齐对齐< / option> < /选择> < label for =text-stroke-color>笔画C：< / label> < input type =colorid =text-stroke-color> < label for =text-stroke-width>笔画W：< / label> < input type =numbervalue =1min =1max =5id =text-stroke-width> < label for =text-font-size>字体S：< / label> < input type =numbermin =12max =120step =1id =text-font-size> < label for =text-line-height> Line H：< / label> < input type =numbermin =0max =10step =0.1id =text-line-height> < label for =text-bg-color> BG Color：< / label> < input type =colorid =text-bg-colorsize =10> < label for =text-lines-bg-color> BG文字颜色：< / label> < input type =colorid =text-lines-bg-colorsize =10> < input type ='checkbox'name ='fonttype'id =text-cmd-bold> < b取代; B< / B个< input type ='checkbox'name ='fonttype'id =text-cmd-italic> < EM I标记< / EM> < input type ='checkbox'name ='fonttype'id =text-cmd-underline>下划线< input type ='checkbox'name ='fonttype'id =text-cmd-linethrough> Linethrough< input type ='checkbox'name ='fonttype'id =text-cmd-overline> Overline< / div> < / DIV> < / DIV> < canvas id =cwidth =700height =500>< / canvas> < script src =fabric / fabric.min.js>< / script> < script src =javascript.js>< / script>< / body>< / html>
解决方案
您可以使用 setBackgroundImage（） 方法可以使用fabric.js将背景图像添加到画布。
document.getElementById（id）.addEventListener（change，function（e）{
var file = e。 target.files [0];
var reader = new FileReader（）;
reader.onload = function（f）{
var data = f.target.result;
fabric .Image.fromURL（data，function（img）{
//添加背景图片
canvas.setBackgroundImage（img，canvas.renderAll.bind（canvas），{
scaleX：canvas.width / img.width，
scaleY：canvas.height / img.height
}）;
}）;
};
reader.readAsDataURL（file）;
}）;
strongɴɢɴɢᴇxᴀᴍᴘʟᴇ⧩
$ b $
//从localvar canvas = new fabric.Canvas（'c'）; // display / hide text controlscanvas.on（'object：selected'，function（e）{if（e.target.type ==='i-text'）{document.getElementById（'textControls'）。hidden = false;}} ）; canvas.on（'before：selection：cleared'，function（e）{if（e.target.type ==='i-text'）{document.getElementById（'textControls'）。hidden = true;} }）; document.getElementById（'file'）。addEventListener（change，function（e）{var file = e.target.files [0]; var reader = new FileReader（）; reader.onload = function（f ）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{var oImg = img.set（{left：0，top：0，angle：0，border：'＃000'，stroke：'＃F0F0F0'，//< - set this strokeWidth：40 //<设置这个}）。scale（0.2）; canvas.add（oImg）.renderAll（）; // var a = canvas.setActiveObject（oImg）; var dataURL = canvas.toDataURL（{format：'png'，quality：1}）; }）; }; （）; file.getElementById（'file2'）。addEventListener（change，function（e）{var file = e.target.files [0]; var reader = new FileReader（）; reader.onload = function（f）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{//添加背景图像canvas.setBackgroundImage（img，canvas.renderAll.bind（canvas） ，{scaleX：canvas.width / img.width，scaleY：canvas.height / img.height}）;}）;}; reader.readAsDataURL（file）;}）; //删除选中的objectwindow.deleteObject = function（） {var activeGroup = canvas.getActiveGroup（）; if（activeGroup）{var activeObjects = activeGroup.getObjects（）; for（让我在activeObjects中）{canvas.remove（activeObjects [i]）; } canvas.discardActiveGroup（）; canvas.renderAll（）; } else canvas.getActiveObject（）。remove（）; } //刷新页面函数refresh（）{setTimeout（function（）{location.reload（）}，100）;} //添加textfunction Addtext（）{canvas.add（new fabric.IText（'Tap and Type'，{ left：50，top：100，fontFamily：'helvetica neue'，fill：'＃000'，stroke：'#fff'，strokeWidth：.1，fontSize：45}））;} //编辑Textdocument.getElementById（'文本颜色'）。onchange = function（）{canvas.getActiveObject（）。setFill（this.value）; canvas.renderAll（）;}; document.getElementById（'text-color'）。onchange = function（）{canvas.getActiveObject（）。setFill（this.value）; canvas.renderAll（）;}; document.getElementById（'text-bg-color'）。onchange = function（）{canvas.getActiveObject（）。setBackgroundColor（this.value）; canvas.renderAll（）;}; document.getElementById（'text-lines-bg-color'）。onchange = function（）{canvas.getActiveObject（）。setTextBackgroundColor（this.value）; canvas.renderAll（）;}; document.getElementById（'text-stroke-color'）。onchange = function（）{canvas.getActiveObject（）。setStroke（this.value）; canvas.renderAll（）;}; document.getElementById（'text-stroke-width'）。onchange = function（）{canvas.getActiveObject（）。setStrokeWidth（this.value）; canvas.renderAll（）;}; document.getElementById（'font-family'）。onchange = function（）{canvas.getActiveObject（）。setFontFamily（this.value）; canvas.renderAll（）;}; document.getElementById（'text-font-size'）。onchange = function（）{canvas.getActiveObject（）。setFontSize（this.value）; canvas.renderAll（）;}; document.getElementById（'text-line-height'）。onchange = function（）{canvas.getActiveObject（）。setLineHeight（this.value）; canvas.renderAll（）;}; document.getElementById（'text-align'）。onchange = function（）{canvas.getActiveObject（）。setTextAlign（this.value）; canvas.renderAll（）;}; radios5 = document.getElementsByName（fonttype）; // wijzig naar buttonfor（var i = 0，max = radios5.length; i
body {padding：10px 10px 10px 10px; font-family：HelveticaNeue;} canvas {border：1px solid＃bdc3c7; margin：10px 0px 0px 0px; / * background-image：url（images / bg.png）; * /}。myFile {position：relative;溢出：隐藏;向左飘浮; clear：left;}。myFile input [type =file] {display：block;位置：绝对; top：0;正确：0;不透明度：0; font-size：30px; filter：alpha（opacity = 0）;}。myFile2 input [type =file] {display：block;位置：绝对; top：0;正确：0;不透明度：0; font-size：30px; filter：alpha（opacity = 0）;}。title {color：black;文字修饰：无; margin-bottom：20px; display：block;} hr {text-align：left; margin：30px auto 0 0; width：700px;} a：visited {text-decoration：none; color：＃000;} a：active {text-decoration：none; color：＃000;}
< script src = https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-beta.7/fabric.min.js\"></script><script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< label>< a style =text-decoration：none; < span class =mdi mdi-lightbulb-on-outline>品牌< / span>< / a>< / label>< br>< br>< label title =添加图片class =myFile>< span class =mdi mdi-image>添加照片< / span>& nbsp; < input type =fileid =file/>< / label>< label title =添加背景class =myFile2>< span class =mdi mdi-image> ;添加背景< / span>& nbsp; < input type =fileid =file2/>< / label>< a onclick =Addtext（）title =添加文本>< span class =mdi mdi-format-文本>添加文本< / span>< / a>& emsp;< a onclick =sendSelectedObjectToFront（）title =将选择前置>< span class =mdi mdi-arrange-bring-forward >前< / a>< / a>< a onclick =sendSelectedObjectBack（）title =发送选择后退>< span class =mdi mdi-arrange-send-backward>返回< / span>< / a>< a onClick =deleteObject（）title =删除所选内容>< span class =mdi mdi-delete>删除< / span>< / a>& emsp;< a onclick =refresh（）title =新鲜开始>< span class =mdi mdi-shredder>全部清除< / span>< / a>& emsp;< a id =lnkDownloadtitle =保存>< span class =mdi mdi-download>保存< / span>< / a>< div id =textControlshidden> < div id =text-wrapperdata-ng-show =getText（）> < div id =text-controls> < select id =font-family> < option value =arial> Arial< / option> < option value =HelveticaNeueselected> Helvetica Neue< / option> < option value =myriad pro> Myriad Pro< / option> < option value =美味> Delicious< / option> < option value =verdana> Verdana< / option> < option value =georgia>格鲁吉亚< / option> < option value =courier> Courier< / option> < option value =comic sans ms> Comic Sans MS< / option> < option value =impact>影响< / option> < option value =monaco>摩纳哥< / option> < option value =optima> Optima< / option> < option value =hoefler text> Hoefler Text< / option> < option value =plaster>石膏< / option> < option value =engagement> Engagement< / option> < /选择> < input type =colorid =text-colorsize =10> < select id =text-align> < option value =left>左对齐< / option> < option value =center>对齐中心< / option> < option value =right>右对齐< / option> < option value =justify>对齐对齐< / option> < /选择> < label for =text-stroke-color>笔画C：< / label> < input type =colorid =text-stroke-color> < label for =text-stroke-width>笔画W：< / label> < input type =numbervalue =1min =1max =5id =text-stroke-width> < label for =text-font-size>字体S：< / label> < input type =numbermin =12max =120step =1id =text-font-size> < label for =text-line-height> Line H：< / label> < input type =numbermin =0max =10step =0.1id =text-line-height> < label for =text-bg-color> BG Color：< / label> < input type =colorid =text-bg-colorsize =10> < label for =text-lines-bg-color> BG文字颜色：< / label> < input type =colorid =text-lines-bg-colorsize =10> < input type ='checkbox'name ='fonttype'id =text-cmd-bold> < b取代; B< / B个< input type ='checkbox'name ='fonttype'id =text-cmd-italic> < EM I标记< / EM> < input type ='checkbox'name ='fonttype'id =text-cmd-underline>下划线< input type ='checkbox'name ='fonttype'id =text-cmd-linethrough> Linethrough< input type ='checkbox'name ='fonttype'id =text-cmd-overline> Overline< / div> < / div>< / div>< canvas id =cwidth =700height =500>< / canvas>
I'm able to add images by using an input type="file" id="file" however would like to be able upload an image that can be moved and stay behind all else as a background image. Right now I can add something and send it to the back but moving it is difficult because the controls run off the canvas. Any help would be greatly appreciated—thanks in advance.
// Add image from local
var canvas = new fabric.Canvas('c');
// display/hide text controls
canvas.on('object:selected', function(e) {
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = false;
}
});
canvas.on('before:selection:cleared', function(e) {
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = true;
}
});
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
border: '#000',
stroke: '#F0F0F0', //<-- set this
strokeWidth: 40 //<-- set this
}).scale(0.2);
canvas.add(oImg).renderAll();
//var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
var activeGroup = canvas.getActiveGroup();
if (activeGroup) {
var activeObjects = activeGroup.getObjects();
for (let i in activeObjects) {
canvas.remove(activeObjects[i]);
}
canvas.discardActiveGroup();
canvas.renderAll();
} else canvas.getActiveObject().remove();
}
// Refresh page
function refresh() {
setTimeout(function() {
location.reload()
}, 100);
}
// Add text
function Addtext() {
canvas.add(new fabric.IText('Tap and Type', {
left: 50,
top: 100,
fontFamily: 'helvetica neue',
fill: '#000',
stroke: '#fff',
strokeWidth: .1,
fontSize: 45
}));
}
// Edit Text
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
canvas.getActiveObject().setBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
canvas.getActiveObject().setTextBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
canvas.getActiveObject().setStroke(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
canvas.getActiveObject().setStrokeWidth(this.value);
canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
canvas.getActiveObject().setFontFamily(this.value);
canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
canvas.getActiveObject().setFontSize(this.value);
canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
canvas.getActiveObject().setLineHeight(this.value);
canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
canvas.getActiveObject().setTextAlign(this.value);
canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
radios5[i].onclick = function() {
if (document.getElementById(this.id).checked == true) {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "bold");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "italic");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "underline");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "line-through");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "overline");
}
} else {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "");
}
}
canvas.renderAll();
}
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
canvas.bringToFront(selectedObject);
}
// Download
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
function saveImage(e) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'custom.png'
}
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: true,
cornerColor: '#22A7F0',
borderColor: '#22A7F0',
cornerSize: 12,
padding: 5
});
body {
padding: 10px 10px 10px 10px;
font-family: "HelveticaNeue";
}
canvas {
border: 1px solid #bdc3c7;
margin: 10px 0px 0px 0px;
/* background-image: url("images/bg.png"); */
}
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 30px;
filter: alpha(opacity=0);
}
.title {
color: black;
text-decoration: none;
margin-bottom: 20px;
display: block;
}
hr {
text-align: left;
margin: 30px auto 0 0;
width: 700px;
}
a:visited {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Brand</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="icons/css/materialdesignicons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<label><a style="text-decoration: none;" href="#"><span class="mdi mdi-lightbulb-on-outline">Brand</span></a></label><br><br>
<label title="Add an image" class="myFile"><span class="mdi mdi-image"> Add Photo</span> <input type="file" id="file" /></label>
<a onclick="Addtext()" title="Add text"><span class="mdi mdi-format-text"> Add Text</span></a> 
<a onclick="sendSelectedObjectToFront()" title="Bring selected to front"><span class="mdi mdi-arrange-bring-forward"> Front</span></a>
<a onclick="sendSelectedObjectBack()" title="Send selected to back"><span class="mdi mdi-arrange-send-backward"> Back</span></a>
<a onClick="deleteObject()" title="Delete Anything Selected"><span class="mdi mdi-delete"> Delete</span></a> 
<a onclick="refresh()" title="Start fresh"><span class="mdi mdi-shredder"> Clear All</span></a> 
<a id="lnkDownload" title="Save"><span class="mdi mdi-download"> Save</span></a>
<div id="textControls" hidden>
<div id="text-wrapper" data-ng-show="getText()">
<div id="text-controls">
<select id="font-family">
<option value="arial">Arial</option>
<option value="HelveticaNeue" selected>Helvetica Neue</option>
<option value="myriad pro">Myriad Pro</option>
<option value="delicious">Delicious</option>
<option value="verdana">Verdana</option>
<option value="georgia">Georgia</option>
<option value="courier">Courier</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="impact">Impact</option>
<option value="monaco">Monaco</option>
<option value="optima">Optima</option>
<option value="hoefler text">Hoefler Text</option>
<option value="plaster">Plaster</option>
<option value="engagement">Engagement</option>
</select>
<input type="color" id="text-color" size="10">
<select id="text-align">
<option value="left">Align Left</option>
<option value="center">Align Center</option>
<option value="right">Align Right</option>
<option value="justify">Align Justify</option>
</select>
<label for="text-stroke-color">Stroke C:</label>
<input type="color" id="text-stroke-color">
<label for="text-stroke-width">Stroke W:</label>
<input type="number" value="1" min="1" max="5" id="text-stroke-width">
<label for="text-font-size">Font S:</label>
<input type="number" min="12" max="120" step="1" id="text-font-size">
<label for="text-line-height">Line H:</label>
<input type="number" min="0" max="10" step="0.1" id="text-line-height">
<label for="text-bg-color">BG Color:</label>
<input type="color" id="text-bg-color" size="10">
<label for="text-lines-bg-color">BG Text Color:</label>
<input type="color" id="text-lines-bg-color" size="10">
<input type='checkbox' name='fonttype' id="text-cmd-bold"> <b>B</b>
<input type='checkbox' name='fonttype' id="text-cmd-italic"> <em>I</em>
<input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
<input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
<input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
</div>
</div>
</div>
<canvas id="c" width="700" height="500"></canvas>
<script src="fabric/fabric.min.js"></script>
<script src="javascript.js"></script>
</body>
</html>
解决方案
You can use the setBackgroundImage() method to add a background image to the canvas with fabric.js.
document.getElementById(id).addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
// add background image
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
});
};
reader.readAsDataURL(file);
});
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
// Add image from local
var canvas = new fabric.Canvas('c');
// display/hide text controls
canvas.on('object:selected', function(e) {
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = false;
}
});
canvas.on('before:selection:cleared', function(e) {
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = true;
}
});
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 0,
border: '#000',
stroke: '#F0F0F0', //<-- set this
strokeWidth: 40 //<-- set this
}).scale(0.2);
canvas.add(oImg).renderAll();
//var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
document.getElementById('file2').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
// add background image
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
});
};
reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
var activeGroup = canvas.getActiveGroup();
if (activeGroup) {
var activeObjects = activeGroup.getObjects();
for (let i in activeObjects) {
canvas.remove(activeObjects[i]);
}
canvas.discardActiveGroup();
canvas.renderAll();
} else canvas.getActiveObject().remove();
}
// Refresh page
function refresh() {
setTimeout(function() {
location.reload()
}, 100);
}
// Add text
function Addtext() {
canvas.add(new fabric.IText('Tap and Type', {
left: 50,
top: 100,
fontFamily: 'helvetica neue',
fill: '#000',
stroke: '#fff',
strokeWidth: .1,
fontSize: 45
}));
}
// Edit Text
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
canvas.getActiveObject().setBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
canvas.getActiveObject().setTextBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
canvas.getActiveObject().setStroke(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
canvas.getActiveObject().setStrokeWidth(this.value);
canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
canvas.getActiveObject().setFontFamily(this.value);
canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
canvas.getActiveObject().setFontSize(this.value);
canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
canvas.getActiveObject().setLineHeight(this.value);
canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
canvas.getActiveObject().setTextAlign(this.value);
canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
radios5[i].onclick = function() {
if (document.getElementById(this.id).checked == true) {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "bold");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "italic");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "underline");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "line-through");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "overline");
}
} else {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "");
}
}
canvas.renderAll();
}
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
canvas.bringToFront(selectedObject);
}
// Download
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
function saveImage(e) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'custom.png'
}
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: true,
cornerColor: '#22A7F0',
borderColor: '#22A7F0',
cornerSize: 12,
padding: 5
});
body {
padding: 10px 10px 10px 10px;
font-family: "HelveticaNeue";
}
canvas {
border: 1px solid #bdc3c7;
margin: 10px 0px 0px 0px;
/* background-image: url("images/bg.png"); */
}
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 30px;
filter: alpha(opacity=0);
}
.myFile2 input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 30px;
filter: alpha(opacity=0);
}
.title {
color: black;
text-decoration: none;
margin-bottom: 20px;
display: block;
}
hr {
text-align: left;
margin: 30px auto 0 0;
width: 700px;
}
a:visited {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-beta.7/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><a style="text-decoration: none;" href="#"><span class="mdi mdi-lightbulb-on-outline">Brand</span></a></label>
<br>
<br>
<label title="Add an image" class="myFile"><span class="mdi mdi-image"> Add Photo</span>
<input type="file" id="file" />
</label>
<label title="Add a background" class="myFile2"><span class="mdi mdi-image"> Add Background</span>
<input type="file" id="file2" />
</label>
<a onclick="Addtext()" title="Add text"><span class="mdi mdi-format-text"> Add Text</span></a> 
<a onclick="sendSelectedObjectToFront()" title="Bring selected to front"><span class="mdi mdi-arrange-bring-forward"> Front</span></a>
<a onclick="sendSelectedObjectBack()" title="Send selected to back"><span class="mdi mdi-arrange-send-backward"> Back</span></a>
<a onClick="deleteObject()" title="Delete Anything Selected"><span class="mdi mdi-delete"> Delete</span></a> 
<a onclick="refresh()" title="Start fresh"><span class="mdi mdi-shredder"> Clear All</span></a> 
<a id="lnkDownload" title="Save"><span class="mdi mdi-download"> Save</span></a>
<div id="textControls" hidden>
<div id="text-wrapper" data-ng-show="getText()">
<div id="text-controls">
<select id="font-family">
<option value="arial">Arial</option>
<option value="HelveticaNeue" selected>Helvetica Neue</option>
<option value="myriad pro">Myriad Pro</option>
<option value="delicious">Delicious</option>
<option value="verdana">Verdana</option>
<option value="georgia">Georgia</option>
<option value="courier">Courier</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="impact">Impact</option>
<option value="monaco">Monaco</option>
<option value="optima">Optima</option>
<option value="hoefler text">Hoefler Text</option>
<option value="plaster">Plaster</option>
<option value="engagement">Engagement</option>
</select>
<input type="color" id="text-color" size="10">
<select id="text-align">
<option value="left">Align Left</option>
<option value="center">Align Center</option>
<option value="right">Align Right</option>
<option value="justify">Align Justify</option>
</select>
<label for="text-stroke-color">Stroke C:</label>
<input type="color" id="text-stroke-color">
<label for="text-stroke-width">Stroke W:</label>
<input type="number" value="1" min="1" max="5" id="text-stroke-width">
<label for="text-font-size">Font S:</label>
<input type="number" min="12" max="120" step="1" id="text-font-size">
<label for="text-line-height">Line H:</label>
<input type="number" min="0" max="10" step="0.1" id="text-line-height">
<label for="text-bg-color">BG Color:</label>
<input type="color" id="text-bg-color" size="10">
<label for="text-lines-bg-color">BG Text Color:</label>
<input type="color" id="text-lines-bg-color" size="10">
<input type='checkbox' name='fonttype' id="text-cmd-bold"> <b>B</b>
<input type='checkbox' name='fonttype' id="text-cmd-italic"> <em>I</em>
<input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
<input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
<input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
</div>
</div>
</div>
<canvas id="c" width="700" height="500"></canvas>
这篇关于使用fabric.js添加背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
