使用fabric.js和HTML5在图像画布上编写自定义文本
Write custom text on image canvas with fabric.js and 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="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a><br />
<img id="preview" />
https://jsfiddle.net/varunPes/vb1weL93/
我看到了一些链接:
- http://fancyproductdesigner.com/product/t-shirt/-预期结果
- http://jsfiddle.net/EffEPi/qpJTz/
更新
我需要用户可以选择文本的color
和font-family
。
单击Click Me!!
按钮后,custom text
和图像应合并为一个图像。
您可以这样使用IText
:
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100,
}));
完整的代码:
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){
// old api
// obj.setFill($(this).val());
obj.set("fill", this.value);
}
canvas.renderAll();
});
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
// old api
// obj.setFontFamily($(this).val());
obj.set("fontFamily", this.value);
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
oText.bringToFront();
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
}
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://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/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" />
更新:要使文本始终位于前面,您需要使用.bringToFront()
函数
(感谢Fabric.js中的@Amit Sharma-绘制多个图像zindex的问题)
http://jsbin.com/qicesa/edit?html,css,js,输出
相关文章:
- 不使用自定义CSS或HTML(使用框架方法)的角度材质文本输入或文本区域标签大小
- 如何在Paypal中自定义订单摘要上方的文本
- 将动态验证文本添加到自定义jQuery验证规则中
- 文本编辑工具栏解决方案 (js),具有低级自定义
- 防止自定义文本出现在页面上的所有高图表上,←使用 {events:{load:function(){var.
- 将 d3 演示中的圆圈和文本替换为包含自定义 HTML 和 ko 绑定的 foreignObject
- Highcharts自定义文本从右向左导出
- 谷歌可视化树图-如何创建自定义文本
- 动态自定义文本堆栈标签Highcharts
- 使用NetSuite SuiteScript访问自定义列的文本值
- 无法编辑Ext图表中的自定义文本项
- 自定义amCharts饼图中的气球文本
- 文本区域的自定义占位符
- 使用喜欢按钮在Facebook上传输自定义文本
- 如何在 sugarcrm 中的自定义下拉字段中更改值时填充自定义文本区域
- 需要 Jquery 文本动画自定义帮助
- 使用 JS 或 jQuery 解析自定义文本标记
- 隐藏所有带有与数字“0”匹配的文本或内部HTML的“a”元素,或使用javascript或jQuery的自定义值
- Aurelia:绑定文本自定义元素的内容
- 使用您自己的<输入类型="文本";自定义搜索框