使用fabric.js和HTML5在图片画布上编写自定义文本 [英] Write custom text on image canvas with fabric.js and HTML5
本文介绍了使用fabric.js和HTML5在图片画布上编写自定义文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用HTML5和 fabric.js 进行上传多个图像。我想在此图像画布上添加自定义文本。现在我正在上传多个图像到画布一个一个。上传图片后，我想在画布上添加自定义文字。
var canvas = new fabric.Canvas（'canvas'）; document.getElementById 'file'）。addEventListener（change，function（e）{var file = e.target.files [0]; var reader = new FileReader（）; console.log（reader+ reader）; reader.onload = function（f）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{var oImg = img.set（{left：70，top：100，width：250，height： 200，angle：0}）。scale（0.9）; canvas.add（oImg）.renderAll（）; var a = canvas.setActiveObject（oImg）; var dataURL = canvas.toDataURL（format：'png'，quality： 0.8}）;}）;}; reader.readAsDataURL（file）;}）; document.querySelector（'＃txt'）。onclick = function（e）{e.preventDefault canvas.deactivateAll（）。renderAll（）; document.querySelector（'＃preview'）。src = canvas.toDataURL（）;};
canvas {border：1px solid black;}
< script src =https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js>< / script>< input type =file id =file>< canvas id =canvaswidth =750height =550>< / canvas>< a href =''id ='txt'target =_ blank> ; Click Me !!< / a>< br />< img id =preview/>
/ p>
https://jsfiddle.net/varunPes/vb1weL93/
我看到过一些链接：
更新
我需要用户选择文本的颜色和 font-family 。
单击单击我！按钮后，自定义文本和图像应该在一个图像中。
解决方案
您可以使用 IText 如下：
（new fabric.IText（'Tap and Type'，{
fontFamily：'arial black'，
left：100，
top：100，
}
完整代码：
div class =snippetdata-lang =jsdata-hide =false>
var canvas = new fabric.Canvas（'canvas'）; document.getElementById（'file'）。addEventListener（change，function（e）{var file = e.target.files [0] var reader = new FileReader（）; console.log（reader+ reader）; reader.onload = function（f）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{ var oImg = img.set（{left：70，top：100，width：250，height：200，angle：0}）。scale（0.9）; canvas.add（oImg）.renderAll（）; canvas.setActiveObject （obj）;}）;}; reader.readAsDataURL（file）;}）; $（'＃fill'）。change（function（）{var obj = canvas.getActiveObject（）; if（obj）{obj.setFill $（this）.val（））;} canvas.renderAll（）;}）; $（'＃font'）。change（function（）{var obj = canvas.getActiveObject（）; if（obj）{obj。 setFontFamily（$（this）.val（））;} canvas.renderAll（）;}）; function addText（）{var oText = new fabric.IText（'Tap and Type'，{left：100，top： }）; canvas.add（oText）; canvas.setActiveObject（oText）; $（'＃fill，#font'）。trigger（'change'）; oText.bringToFront（）;} document.querySelector（'＃txt'）。onclick = function（e）{e.preventDefault（）; canvas.deactivateAll（）。renderAll（）; document.querySelector（'＃preview'）。src = canvas.toDataURL（）;};
canvas {border：1px solid black;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src = https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js\"> ;</script><input type =fileid =file><输入类型=colorvalue =blueid =fill/>< select id =font> < option> arial< / option> < option> tahoma< / option> < / button>< br />< canvas id =canvaswidth（< br>）< / button>< =750height =550>< / canvas>< a href =''id ='txt'target =_ blank>点击我！< / a>< br / < img id =preview/>
Update：
要使文本始终在前面，您需要使用 .bringToFront（）函数。
（感谢@Amit Sharma在 Fabric.js - 问题与绘制多个图片zindex ）
http://jsbin.com/qicesa/edit?html,css,js,output
I am using HTML5 and fabric.js for uploading multiple images. I want to add custom text on this image canvas. Right now I am uploading multiple images into canvas one by one. After uploading images I want to add custom text on canvas.
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
canvas{
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a><br />
<img id="preview" />
https://jsfiddle.net/varunPes/vb1weL93/
I have seen some links:
- http://fancyproductdesigner.com/product/t-shirt/ - The expected result.
- http://jsfiddle.net/EffEPi/qpJTz/
Update
I need that the user can choose the text's color and the font-family.
After clicking on Click Me!! button, the custom text and image should come together in one image.
解决方案
You can use IText like this:
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100 ,
}));
And the full code:
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
$('#fill').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFill($(this).val());
}
canvas.renderAll();
});
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFontFamily($(this).val());
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
oText.bringToFront();
}
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
canvas{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<input type="color" value="blue" id="fill" />
<select id="font">
<option>arial</option>
<option>tahoma</option>
<option>times new roman</option>
</select>
<button onclick="addText()">Add Custom Text</button>
<br />
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />
Update:
To keep the text always in the front you need to use .bringToFront() function.
(Thanks to @Amit Sharma in Fabric.js - problem with drawing multiple images zindex)
http://jsbin.com/qicesa/edit?html,css,js,output
这篇关于使用fabric.js和HTML5在图片画布上编写自定义文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
