我正在研究面料设计js app&我需要一个像我的设计应用程序一样的贴纸模切效果,如链接
http://www.stickeryou.com/2/stickermaker/selectart
转到此链接首先添加一些文字&图像&改变图像模切的方法
我的代码是
canvas = new fabric.Canvas('design-canvas');
jQuery('#add-text-btn').click(function() {
var message = $('textarea#add-text-value').val();
var new_text = new fabric.Text(message, { left: 100, top: 100, fontSize: 20 });
canvas.add(new_text);
canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
});
// image manage
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var imgInstance = new fabric.Image(img, {
scaleX: 0.2,
scaleY: 0.2
})
canvas.add(imgInstance);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
// image manage
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="7" class="form-control" id="add-text-value">Your Text Here</textarea>
<button id="add-text-btn">ADD TEXT </button>
<input class="btn btn-default" type="file" id="imageLoader" name="imageLoader" />
<div style="background:#eee"><canvas id="design-canvas" width="500" height="400"></canvas></div>