本文介绍了使用fabric.js和HTML5在图片画布上编写自定义文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用HTML5和进行上传多个图像。我想在此图像画布上添加自定义文本。现在我正在上传多个图像到画布一个一个。上传图片后,我想在画布上添加自定义文字。
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>
我看到过一些链接:
更新
我需要用户选择文本的颜色
和 font-family
。
单击单击我!
按钮后,自定义文本
和图像应该在一个图像中。
解决方案
您可以使用如下:
(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在)
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:
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在图片画布上编写自定义文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!