hey, i try to implement that but getting error at prototype "SignaturePage.prototype: any"
error in my ts file…
and where should i add that code to in my signature.ts file
i think u have to change the library to not clear if there is only one point left.
thanks…that task completed by me today …but i have another problem now
…when am opening camera it take a picture but image is not display on
screen…instead black screen appear and my app closes…any solution ??
sorry, i have no idea…
how did u fix the prior problem?
i just adjust the image taken through camera on siganture pad using scss
@umeshionic1234 Hi, i am having a requirement where i can take image from camera and show paint options somethings like freehand line, straight line, rectangle, circle, arrow head, text, undo/redo, save.
I have performed this earlier on web application with script working on canvas.
like below
$(document).ready(function () {
// Grab elements, create settings, etc.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function (e) {
console.log('An error has occurred!', e)
};
// Get the modal
var modal = document.getElementById('myModal');
var mediaStream = null;
// Get the modal
var imgCtrls = ["pg_4_photo1", "pg_4_photo2", "pg_4_photo3", "pg_4_photo4", "pg_4_photo5", "pg_4_photo6", "pg_4_photo7", "pg_4_photo8", "pg_4_photo9", "pg_4_photo10", "pg_4_photo11", "pg_4_photo12"]
for (i = 0; i < imgCtrls.length; i++) {
// When the user clicks the button, open the modal
document.getElementById(imgCtrls[i]).onclick = function (event) {
v = event.currentTarget.id;
hdfImageName.value = v;
event.preventDefault();
//img.style.visibility = "hidden";
// Put video listeners into place
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
mediaStream = stream;
mediaStream.stop = function () {
this.getAudioTracks().forEach(function (track) {
track.stop();
});
this.getVideoTracks().forEach(function (track) { //in case... :)
track.stop();
});
};
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
/* Legacy code below! */
else if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(mediaConfig, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(mediaConfig, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
navigator.mozGetUserMedia(mediaConfig, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
//modal.style.display = "block";
$('#myModal').show();
$('#divContainer').hide();
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// Trigger photo take
document.getElementById('snap').addEventListener('click', function (event) {
event.preventDefault();
context.drawImage(video, 0, 0, 512, 384);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var bgImg = new Image();
bgImg.style.zIndex = 1000;
bgImg.src = canvas.toDataURL("img/jpeg", 1.0);
ctx.drawImage(bgImg, 0, 0);
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;
var tooltype = 'draw';
//Mousedown
$(canvas).on('mousedown', function (e) {
last_mousex = mousex = parseInt(e.clientX - canvasx);
last_mousey = mousey = parseInt(e.clientY - canvasy);
mousedown = true;
});
//Mouseup
$(canvas).on('mouseup', function (e) {
mousedown = false;
});
//Mousemove
$(canvas).on('mousemove', function (e) {
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
if (mousedown) {
ctx.beginPath();
if (tooltype == 'draw') {
ctx.globalCompositeOperation = 'source-over';
ctx.strokeStyle = 'orange';
ctx.lineWidth = 2;
} else {
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 10;
}
ctx.moveTo(last_mousex, last_mousey);
ctx.lineTo(mousex, mousey);
ctx.lineJoin = ctx.lineCap = 'butt';
ctx.stroke();
}
last_mousex = mousex;
last_mousey = mousey;
//Output
$('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
});
});
// Set up touch events for mobile, etc
canvas.addEventListener("touchstart", function (e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchend", function (e) {
var mouseEvent = new MouseEvent("mouseup", {});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchmove", function (e) {
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
// Get the position of a touch relative to the canvas
function getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function (e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function (e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function (e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
// TOUCH EVENTS ENDS HERE
var link = document.createElement('a');
link.innerHTML = "<span style='color: white;'>Close</span>";
link.addEventListener('click', function (ev) {
//alert(v);
link.href = canvas.toDataURL();
//link.download = v + ".jpg";
document.getElementById(v).src = canvas.toDataURL();
ctx.beginPath();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
//modal.style.display = "none";
$('#myModal').hide();
$('#divContainer').show();
mediaStream.stop();
}, false);
document.getElementById('downloadImgLink').appendChild(link);
});
pls… help me on this
give me your email id
if you don’t want to store the images in the device just store their content in a variable or in local storage, i guess?
I got a solution where, I was can jst move the captured base64data and move that into painterro.js where i can edit the same.
Anyone with the best solution?
Hi, I need to draw line and text on image with ionic 3. The image will be taken from camera.
Can you help me?
Hi @umeshionic1234 i’m doing same functionality as of you did before a year, can you please share me code or any references that you had used.
did you found the solution ??
Yes. I used canvas.
- take the picture from camera and show preview view.
- draw the canvas what you want.
1 Like