我希望创建一个流程,使用户可以上传他们的图片,并在浏览器中使用Fabric.js中的一些按钮在Canvas上编辑它们,这些按钮使用Fabric.js添加一些效果。
但我无法使其工作。我的HTML代码如下:
<form id="uploadImg" runat="server">
<input type="file" id="uploadedImg"/>
</form>
<canvas id="canvas"></canvas>
以下是 JavaScript 代码:
var canvas = new fabric.Canvas('canvas');
canvas.setHeight(480);
canvas.setWidth(640);
$('#uploadedImg').change(function () {
var imgData = $(this).files[0];
fabric.util.loadImage(imgData, function(img) {
var oImg = new fabric.Image(img);
oImg.scale(0.2).set({
left: 100,
top: 100,
});
canvas.add(oImg);
});
});