I'd like to make a saver/loader for a single canvas, like on the Fabric.js example website (see JSON tab). I'm able to get, and load to a canvas, my JSON (kudos Durga) with this:
var canvas = new fabric.Canvas('canvas', {
backgroundColor: 'white',
centeredScaling: true,
isDrawingMode: true
});
var canvas1 = new fabric.Canvas('canvas1');
function loadOnCanvas(){
var json = canvas.toJSON();
console.log(json)
canvas1.loadFromJSON(json,canvas1.renderAll.bind(canvas1));
}
body {
}
canvas {
border-radius: 2px;
margin: 5px;
border:1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<button onclick='loadOnCanvas()'>Load</button>
<canvas id="canvas" height="400" width="400"></canvas><br>
<canvas id="canvas1" height="400" width="400"></canvas>
How would I go about getting the JSON on the page so that I can save/load it like in the example?
For anyone coming across this post, I eventually got a solution (here's the JSFiddle) together:
$(function() {
var canvas = new fabric.Canvas('c', {
/* isDrawingMode: true */
});
$('#text').on('click', addtext);
function addtext() {
var text = new fabric.IText('Some Text!', {
left: 10,
top: 10
});
canvas.add(text);
}
// From Computer
document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
console.log('fdsf');
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function() {
// start fabricJS stuff
var image = new fabric.Image(imgObj);
image.set({
left: 0,
top: 0,
angle: 20,
padding: 10,
cornersize: 10
});
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
image.scale(0.2);
canvas.add(image);
// end fabricJS stuff
}
}
reader.readAsDataURL(e.target.files[0]);
}
//
var myImg = 'https://i.imgur.com/q2oGjQ9.jpg';
$('#addImage').on('click', addImg);
function addImg() {
fabric.Image.fromURL(myImg, function(oImg) {
oImg.scale(0.2);
canvas.add(oImg);
});
}
$("#canvas2json").click(function() {
var json = canvas.toJSON();
$("#myTextArea").text(JSON.stringify(json));
});
$("#loadJson2Canvas").click(function() {
canvas.loadFromJSON(
$("#myTextArea").val(),
canvas.renderAll.bind(canvas));
});
});
#myTextArea {
width: 200px;
height: 200px;
}
canvas {
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="text">Add Text</button>
<input type="button" id="addImage" value="Add Web IMG">
<input type="file" id="imgLoader">
<br/><br/>
<canvas id='c' width=500 height=500></canvas>
<br/>
<button id='canvas2json'>canvas2json</button>
<button id='loadJson2Canvas'>loadJson2Canvas</button>
<br/><br/>
<textarea id='myTextArea' onfocus="this.select();" onmouseup="return false;"></textarea>
Related
I have two canvases where I am making an object on one canvas and cloning it to another for further use. I am achieving this by using
var cloned_rect = fabric.util.object.clone(clone_rect);
After cloning the object onto the target canvas, the object has it's controls messed up. Also I have transparentCorners: false on the source canvas, that is disabled after cloning.
I have recreated the problem in this jsFidde.
var canvasEl1 = document.getElementById('canvas1');
var ctx1 = canvasEl1.getContext('2d');
var canvas1 = new fabric.Canvas('canvas1');
var canvasEl2 = document.getElementById('canvas2');
var ctxPrint = canvasEl2.getContext('2d');
var canvas2 = new fabric.Canvas('canvas2');
function selectAllObjects(desiredCanvas) {
desiredCanvas.discardActiveObject();
var sel = new fabric.ActiveSelection(desiredCanvas.getObjects(), {
canvas: desiredCanvas,
});
desiredCanvas.setActiveObject(sel);
desiredCanvas.requestRenderAll();
}
function makeRect() {
var rect = new fabric.Rect({
left: 10,
top: 10,
fill: 'white',
width: 50,
height: 50,
stroke: 'red',
strokeWidth: 5,
transparentCorners: false
});
canvas1.add(rect);
}
function cloneRect() {
selectAllObjects(canvas1);
var clone_rect = canvas1.getActiveObject();
var cloned_rect = fabric.util.object.clone(clone_rect);
canvas2.add(cloned_rect);
canvas2.renderAll();
canvas1.renderAll();
}
<script src="https://unpkg.com/fabric#5.2.1/dist/fabric.min.js"></script>
<html>
<body>
<div style="float:left">
<canvas id="canvas1" width="400" height="200" style="padding: 3px; border: solid;">
</canvas>
<br>
<canvas id="canvas2" width="400" height="200" style="padding: 3px; border: solid;">
</canvas>
<br>
<button type="button" onclick="makeRect()">Make Rectangle</button>
<br>
<button type="button" onclick="cloneRect()">Clone Rectangle</button>
</div>
</body>
</html>
I am new using cropperjs library. But I'm struggling on how can I configure it.
What I have
https://jsfiddle.net/kaeqxfjL/
What I need
I want to integrate a full image crop where you just need to drag the photo inside the canvas instead of having a square to crop the photo. I also need to make the width of the photo fit to the width of the canvas so you cannot drag it left/right; you could only drag it up/down.
var canvas = $("#canvas"),
context = canvas.get(0).getContext("2d"),
$result = $('#result');
$('#fileInput').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
var cropper = canvas.cropper({
aspectRatio: 16 / 9,
dragMode: 'move'
});
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
$result.append( $('<img>').attr('src', croppedImageDataURL) );
});
$('#btnRestore').click(function() {
canvas.cropper('reset');
$result.empty();
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
else {
alert("Invalid file type! Please select an image file.");
}
}
else {
alert('No file(s) selected.');
}
});
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
#canvas {
height: 290px;
width: 650px;
background-color: #ffffff;
cursor: default;
border: 1px solid black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.css" rel="stylesheet"/>
<p>
<!-- Below are a series of inputs which allow file selection and interaction with the cropper api -->
<input type="file" id="fileInput" accept="image/*" />
<input type="button" id="btnCrop" value="Crop" />
<input type="button" id="btnRestore" value="Restore" />
</p>
<div>
<canvas id="canvas">
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
<div id="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.js"></script>
Set image width using class:
.img-container img {
width: 100%;
}
And set viewMode and aspectRatio as below.
var cropper = canvas.cropper({
aspectRatio: 16 / 9,
dragMode: 'move',
viewMode: 3,
aspectRatio: 1
});
var canvas = $("#canvas"),
context = canvas.get(0).getContext("2d"),
$result = $('#result');
$('#fileInput').on('change', function() {
if (this.files && this.files[0]) {
if (this.files[0].type.match(/^image\//)) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
var cropper = canvas.cropper({
aspectRatio: 16 / 9,
dragMode: 'move',
viewMode: 3,
aspectRatio: 1
});
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
$result.append($('<img>').attr('src', croppedImageDataURL));
});
$('#btnRestore').click(function() {
canvas.cropper('reset');
$result.empty();
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
} else {
alert("Invalid file type! Please select an image file.");
}
} else {
alert('No file(s) selected.');
}
});
/* Limit image width to avoid overflow the container */
img {
max-width: 100%;
/* This rule is very important, please do not ignore this! */
}
#canvas {
height: 290px;
width: 650px;
background-color: #ffffff;
cursor: default;
border: 1px solid black;
}
.img-container img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.css" rel="stylesheet" />
<p>
<!-- Below are a series of inputs which allow file selection and interaction with the cropper api -->
<input type="file" id="fileInput" accept="image/*" />
<input type="button" id="btnCrop" value="Crop" />
<input type="button" id="btnRestore" value="Restore" />
</p>
<div>
<canvas id="canvas" class="img-container">
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
<div id="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.js"></script>
I want a draw something canvas tag , when i put in div it doesnt work. I taked this code from github. it isnot working within div.
github url => https://github.com/GeekLaunch/simple-drawing-web-app
how can i do this ? actually i dont know canvas library. but this codes enough for me. In my project i use bootstrap css library.
var canvas, ctx,
brush = {
x: 0,
y: 0,
color: '#000000',
size: 10,
down: false,
},
strokes = [],
currentStroke = null;
function redraw() {
ctx.clearRect(0, 0, canvas.width(), canvas.height());
ctx.lineCap = 'round';
for (var i = 0; i < strokes.length; i++) {
var s = strokes[i];
ctx.strokeStyle = s.color;
ctx.lineWidth = s.size;
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var j = 0; j < s.points.length; j++) {
var p = s.points[j];
ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
}
function init() {
canvas = $('#draw');
ctx = canvas[0].getContext('2d');
function mouseEvent(e) {
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push({
x: brush.x,
y: brush.y,
});
redraw();
}
canvas.mousedown(function (e) {
brush.down = true;
currentStroke = {
color: brush.color,
size: brush.size,
points: [],
};
strokes.push(currentStroke);
mouseEvent(e);
}).mouseup(function (e) {
brush.down = false;
mouseEvent(e);
currentStroke = null;
}).mousemove(function (e) {
if (brush.down)
mouseEvent(e);
});
$('#save-btn').click(function () {
window.open(canvas[0].toDataURL());
});
$('#undo-btn').click(function () {
strokes.pop();
redraw();
});
$('#clear-btn').click(function () {
strokes = [];
redraw();
});
$('#color-picker').on('input', function () {
brush.color = this.value;
});
$('#brush-size').on('input', function () {
brush.size = this.value;
});
}
$(init);
body {
margin: 0;
}
.top-bar {
display: flex;
flex-direction: row;
background-color: #3af;
border-bottom: 2px solid black;
position: absolute;
width: 100%;
}
.top-bar * {
margin: 5px 10px;
}
#draw {
display: block;
}
:<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-bar">
<button id="save-btn">Save</button>
<button id="undo-btn">Undo</button>
<button id="clear-btn">Clear</button>
<input type="color" id="color-picker"></input>
<input type="range" id="brush-size" min="1" nax="50" value="10"></input>
</div>
<div style="border:1px solid red;width:500px;height:500px;margin:auto;">
<canvas id="draw" style="border:1px solid red;"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="draw.js"></script>
</body>
</html>
From my observation, the save button is not working on chrome. Because apparently Google Chrome has removed support for top-frame navigation, you can see more informations here: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM
You may try to render the canvas data to an iFrame.
Add below function to your draw.js file:
function debugBase64(base64URL){
var win = window.open();
win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}
Now run the function when click event occurred.
$('#save-btn').click(function () {
debugBase64(canvas[0].toDataURL());
});
Hope it works !
I have the following code:
<link rel="stylesheet" href="style.css">
<script src="/static/js/jquery/2.1.4/jquery.min.js"></script>
<script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<img id="crop" style="width:400px;height:200px;" />
<div id="img2" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
X: <input type="text" id="crop_x" name="crop_x" /><br />
Y: <input type="text" id="crop_y" name="crop_y" /><br />
Width: <input type="text" id="crop_width" name="crop_width" /><br />
Height: <input type="text" id="crop_height" name="crop_height" /><br />
<input type="file" id="file" name="file" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script>
var url = null;
$('#file').on('change',function(){
var file = this.files[0];
if(url != null){
URL.revokeObjectURL(url);
}
url = URL.createObjectURL(file);
startCropper();
});
function startCropper(){
$('#crop').removeAttr('src');
$('#crop').attr('src',url);
$('#crop').cropper({
viewMode : 0,
cropBoxResizable : false,
minCropBoxWidth : 100,
minCropBoxHeight : 100,
dragMode : 'none',
preview : $('#img2'),
aspectRatio: 1,
crop : function(e){
$('#crop_x').val(e.x);
$('#crop_y').val(e.y);
}
});
};
</script>
The problem is that when I select a new file, the new image is not showed (the old image is still displayed in the cropper).
As you can see, I check the old url and revoke this. When I don't use $("#crop").cropper({...}) in the startCropper() function, it works.
GitHub: https://github.com/fengyuanchen/cropper/tree/v2.3.0
How can I force the cropper to load the new image?
You need to call
$('#crop').cropper('destroy');
before crop initialization
This code will solve the problem of Image not changing in Cropper.
HTML
<input id="userImage" type="file" name="userImage" accept="image/*">
<div>
<canvas id="canvas" style="display: none;">
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
<div id="imagePreview" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
CSS
img {max-width: 100%;} /* This rule is very important, please do not ignore this! */
#canvas {
height: auto;
width: 250px; /*Change this value according to your need*/
background-color: #ffffff;
cursor: default;
border: 1px solid #000;
}
JS
var canvas = $("#canvas");
context = canvas.get(0).getContext("2d");
$('#userImage').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
// Destroy the old cropper instance
canvas.cropper('destroy');
// Replace url
canvas.attr('src', this.result);
var cropper = canvas.cropper({
//these options can be changed or modified according to need
viewMode: 0,
cropBoxResizable: false,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
dragMode: 'none',
preview: $('#imagePreview'),
aspectRatio: 1,
crop : function(e){
$('#crop_x').val(e.x);
$('#crop_y').val(e.y);
}
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
} else {
alert("Invalid file type! Please select an image file.");
}
} else {
alert('No file(s) selected.');
}
});
For more details and better understanding Visit
Cropper Official Documentation
For cropper JS 1.3.3 it is cropper.destroy(); instead of canvas.cropper('destroy') after the drawing of the canvas.
`
I can show the full content of canvas in an <img> tag using canvas.toDataURL() method.
I can get a part of image from canvas using getImageData() method and draw it in another canvas using putImageData() method.
The problem is, I want to show the part of image getting by getImageData() in an <img> tag as canvas.toDataURL() but I failed.
What I've tried so far is:
var canvas = $('canvas')[0];
var ctx = canvas.getContext("2d");
$('#baseImg').load(function() {
ctx.drawImage(this, 0, 0);
});
$('#full').click(function () {
$('div').html('');
var image = new Image();
image.onload = function() {
$('div').html(this);
};
image.src = canvas.toDataURL();
});
// here i failed
$('#partail').click(function () {
$('div').html('');
var image = new Image();
image.onload = function () {
$('div').html(this);
};
image.src = ctx.getImageData(10, 10, 50, 50);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Canvas</h3>
<canvas id="canvas" width="100" height="100" style="border: 1px solid #000000;"></canvas>
<br/><br/>
<img id="baseImg" style="display: none;" src="data:image/png;base64,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" />
<input id="full" type="button" value="Show Full Image" />
<input id="partail" type="button" value="Show Partial Image" />
<h3>Image from canvas</h3>
<div style="border: 1px solid #000000; height: 100px; width: 100px;"></div>
You can use context.drawImage to draw a partial clipped rectangular part of your full image.
The clipping version of drawImage looks like this:
context.drawImage(imageObject,
XClipFromSource, YClipFromSource, widthToClipFromSource, heightToClipFromSource,
canvasX, canvasY, canvasWidth, canvasHeight
);
Here's example code and a demo:
<<===>>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var status=1;
var img=document.getElementById('baseImg');
$('#toggle').on('click',function(){
status*=-1;
draw();
});
draw();
//
function draw(){
if(status==1){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
}else{
canvas.width=50;
canvas.height=50;
ctx.drawImage(img,10,10,50,50,0,0,50,50);
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=toggle>Toggle img display</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>
<img id="baseImg" style="display: none;" src="data:image/png;base64,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" />
I have solved my problem with the suggestions of everyone. I've used a temporary canvas to hold the part of main canvas and then get the partial image from it.
And my solution is:
var canvas = $('canvas')[0];
var ctx = canvas.getContext("2d");
$('#baseImg').load(function() {
ctx.drawImage(this, 0, 0);
});
$('#full').click(function() {
$('div').html('');
var image = new Image();
image.onload = function() {
$('div').html(this);
};
image.src = canvas.toDataURL();
});
$('#partail').click(function() {
$('div').html('');
var height = 50, width = 50;
var copyCanvas = $('<canvas id="canvas" width="' + width + '" height="' + height + '"></canvas>')[0];
var copyCtx = copyCanvas.getContext("2d");
copyCtx.putImageData(ctx.getImageData(10, 10, width, height), 0, 0);
var image = new Image();
image.onload = function() {
$('div').html(this);
};
image.src = copyCanvas.toDataURL();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Canvas</h3>
<canvas id="canvas" width="100" height="100" style="border: 1px solid #000000;"></canvas>
<br /><br />
<img id="baseImg" style="display: none;" src="data:image/png;base64,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" />
<input id="full" type="button" value="Show Full Image" />
<input id="partail" type="button" value="Show Partial Image" />
<h3>Image from canvas</h3>
<div style="border: 1px solid #000000; height: 100px; width: 100px;"></div>