Level 80
@umerfayyaz That’s not how canvas works. When you draw on a canvas element, it’s drawing those pixels as a bitmap. It’s not “HTML” that you can store and edit at a later date. It’s a bitmap image like a JPEG or GIF.
Hi I am using canvas for drawing shapes like drag and drop circle but issue is I want to get html of whole page so I store in db. but after draw shapes when I source code then i did not found html of canvas. what is the best solution for this data to store in table
<div id="content">
<h1 id="plugin-name">wPaint.js</h1>
<div class="content-box">
<!-- jQuery UI -->
<script type="text/javascript" src="./lib/jquery.ui.core.1.10.3.min.js"></script>
<script type="text/javascript" src="./lib/jquery.ui.widget.1.10.3.min.js"></script>
<script type="text/javascript" src="./lib/jquery.ui.mouse.1.10.3.min.js"></script>
<script type="text/javascript" src="./lib/jquery.ui.draggable.1.10.3.min.js"></script>
<!-- wColorPicker -->
<link rel="Stylesheet" type="text/css" href="./lib/wColorPicker.min.css" />
<script type="text/javascript" src="./lib/wColorPicker.min.js"></script>
<!-- wPaint -->
<link rel="Stylesheet" type="text/css" href="./wPaint.min.css" />
<script type="text/javascript" src="./wPaint.min.js"></script>
<script type="text/javascript" src="./plugins/main/wPaint.menu.main.min.js"></script>
<script type="text/javascript" src="./plugins/text/wPaint.menu.text.min.js"></script>
<script type="text/javascript" src="./plugins/shapes/wPaint.menu.main.shapes.min.js"></script>
<script type="text/javascript" src="./plugins/file/wPaint.menu.main.file.min.js"></script>
<div id="wPaint" style="position:relative; width:500px; height:200px; background-color:#7a7a7a; margin:70px auto 20px auto;"></div>
<center style="margin-bottom: 50px;">
<input type="button" value="toggle menu" onclick="console.log($('#wPaint').wPaint('menuOrientation')); $('#wPaint').wPaint('menuOrientation', $('#wPaint').wPaint('menuOrientation') === 'vertical' ? 'horizontal' : 'vertical');"/>
</center>
<center id="wPaint-img"></center>
<script type="text/javascript">
var images = [
'/test/uploads/wPaint.png',
];
function saveImg(image) {
var _this = this;
$.ajax({
type: 'POST',
url: '/test/upload.php',
data: {image: image},
success: function (resp) {
// internal function for displaying status messages in the canvas
_this._displayStatus('Image saved successfully');
// doesn't have to be json, can be anything
// returned from server after upload as long
// as it contains the path to the image url
// or a base64 encoded png, either will work
resp = $.parseJSON(resp);
// update images array / object or whatever
// is being used to keep track of the images
// can store path or base64 here (but path is better since it's much smaller)
images.push(resp.img);
// do something with the image
$('#wPaint-img').attr('src', image);
}
});
}
function loadImgBg () {
// internal function for displaying background images modal
// where images is an array of images (base64 or url path)
// NOTE: that if you can't see the bg image changing it's probably
// becasue the foregroud image is not transparent.
this._showFileModal('bg', images);
}
function loadImgFg () {
// internal function for displaying foreground images modal
// where images is an array of images (base64 or url path)
this._showFileModal('fg', images);
}
// init wPaint
$('#wPaint').wPaint({
menuOffsetLeft: -35,
menuOffsetTop: -50,
saveImg: saveImg,
loadImgBg: loadImgBg,
loadImgFg: loadImgFg
});
</script>
</div>
</div>
Need to store what user draw so next time user found where he left and carry on further. Thanks for any solution for handling this situation
Please or to participate in this conversation.