This is working, but I feel this code is lengthy.
I'm looking for better idea.
var clone = function(imageData) {
var canvas, context;
canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
context = canvas.getContext('2d');
context.putImageData(imageData, 0, 0);
return context.getImageData(0, 0, imageData.width, imageData.height);
};
The ImageData constructor accepts the image data array.
const imageDataCopy = new ImageData(
new Uint8ClampedArray(imageData.data),
imageData.width,
imageData.height
)
With TypedArray.prototype.set() you can directly copy the data.
var imageDataCopy = new Uint8ClampedArray(originalImageData.data);
imageDataCopy.data.set(originalImageData.data);
This sets the content of imageDataCopy to be identical to originalImageData.
Most times it should be sufficient to simply assign the imageData to a new variable, just like:
myImgData=ctx.getImageData(0,0,c.width,c.height); //get image data somewhere
imgDataCopy = myImgData; // clone myImgData
...now imgDataCopy contains a separate copy of myImgData. 🤷♂️
Demo
The snippet below creates 4 "frames" in an array of ImageData's and then loop through them.
const c = document.getElementById('canvas'),
ctx = c.getContext("2d");
var wh=70, iDatas=[], i=0,
lines=[[10,10,wh-10,wh-10], [wh/2,5,wh/2,wh-5], // ⤡,↕
[wh-10,10,10,wh-10], [5,wh/2,wh-5,wh/2]]; // ⤢,↔
c.width=wh;
c.height=wh;
ctx.strokeStyle='blue'; //setup to draw
ctx.lineWidth=9;
ctx.lineWidth='round';
for(var [x1,y1,x2,y2] of lines){
ctx.beginPath();
ctx.moveTo(x1,y1); //draw something
ctx.lineTo(x2,y2);
ctx.stroke();
var d=ctx.getImageData(0,0,c.width,c.height); //get imgdata
iDatas.push( d ); //save imgdata to array
ctx.clearRect(0, 0, c.width, c.height); //clear canvas
}
ctx.strokeStyle='green'; //❌has no effect:
// ↑ shows that color data comes from the source (can't be changed)
ctx.lineWidth='round'; //❌has no effect:
// ↑ shows that non-color styling does NOT come from source (CAN'T be changed)
//now you can refer to the image data as iData[i] where i= 0 to 3
drawFrame();
function drawFrame(){
ctx.putImageData( iDatas[i],0,0); //draw imgData from array
i=(i==3?0:i+1); //set next iteration #
setTimeout(function(){ drawFrame() }, 100); //schedule next frame
}
canvas{ border:2px dotted salmon; }
<canvas id='canvas'></canvas>
Related
I'm using the solution from: How to check if a canvas is blank? but it's not working. My blank canvas URL does not match the newly created canvas URL and I cannot figure out why. They are the same dimensions and everything but their .toDataURL return different things so there is no way for me to tell if it has been drawn in. Below is an example of what happens when I do .toDataURL on my blank canvas and .toDataURL on the newly created canvas, as you can see they differ as you continue along.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0sAAACUCAYAAABCxLIRAAAKfUlEQVR4Xu3ZIRKAQAwEQfj/ow9NgRi/jY5J58wU9znnXD4CBAgQIECAAAECBAgQeAncYsmLIECAAAECBAgQIECAwFdALHkVBAgQIECAAAECBAgQ+BEQS54FAQIECBAgQIAAAQIExJI3QIAAAQIECBAgQIAAgSbgz1JzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTGBB7R+TmNlhJuwAAAAAElFTkSuQmCC
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0sAAACUCAYAAABCxLIRAAAKeUlEQVR4Xu3ZoRHAMAwEwbj/plOADY7/BotoZXKT8/kIECBAgAABAgQIECBA4BI4TAgQIECAAAECBAgQIEDgFhBLXgUBAgQIECBAgAABAgQeAmLJsyBAgAABAgQIECBAgIBY8gYIECBAgAABAgQIECDQBPxZak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJvADO98Ald0HVn8AAAAASUVORK5CYII=
For reference here is the function:
function isCanvasBlank(canvas) {
var blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() == blank.toDataURL();
}
the resulting images you have are different. The first one has a white background and the other is transparent.
This is causing the difference.
this is a quick way to fill the new canvas.
function isCanvasBlank(canvas) {
var blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
var ctx = blank.getContext("2d");
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, blank .width, blank .height);
return canvas.toDataURL() == blank.toDataURL();
}
or use same function as the fiddle. blank.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
function isCanvasBlank(canvas) {
var blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
blank.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
return canvas.toDataURL() == blank.toDataURL();
}
I have a div that contains an img tag and a canvas. When I drag an image into the div, the img.src changes, the new picture appears, and in the canvas, a pointillization animation using the data from the img tag is drawn.
When I drag and drop imgA into the div, imgA appears in the img tag, and the canvas does the animation using imgA, which is what I want.
The problem is here:
From this point, if I drag and drop imgB into the div, imgB appears in the img tag, BUT, the canvas animation uses imgA + imgB data.
I think what I did is this:
I drag and drop an image into the div.
The img.src changes
Once theimg is loaded, i resize and clear the canvas
I draw the new img on the canvas
Function pointillize takes the new canvas data and uses it in the animation which it draws onto the canvas
I thought it had something to do with clearRect() and I tried implementing some of the suggestions but I don't think it's that. I added a click event listener to the document and it does indeed clear the canvas.
Could it have something to do with setInterval? I'm just thinking now that maybe, when the new image is loaded it triggers setInterval to run concurrently to the previous setInterval()? Maybe the solution is to kill all previous setInterval functions upon loading a new img?
EDIT: It works perfectly now. I declared draw a global variable, and inside function pointillize() I clearInterval(draw) before I set draw = setInterval(). This wipes the setInterval function clean before I start a new one.
html:
<div id='container'>
<img id='output' src='file.jpg'/>
</div>
javascript
var container, output;
var c, ctx, draw; // draw is declared here as a global variable
window.onload = function(e) {
c = document.createElement('canvas');
ctx = c.getContext('2d');
document.getElementById('container').appendChild(c);
output = document.getElementById('output');
output.width = '400';
container = document.getElementById('container');
container.style.border = '2px dashed rgb(200, 200, 200)';
container.style.padding = '6px';
container.addEventListener('dragenter', function(e) {
e.stopPropagation();
e.preventDefault();
this.style.border = '2px dashed rgb(50, 50, 50)';
}, false);
container.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
this.style.border = '2px dashed rgb(50, 50, 50)';
}, false);
container.addEventListener('dragleave', function(e) {
e.stopPropagation();
e.preventDefault();
this.style.border = '2px dashed rgb(200, 200, 200)';
}, false);
container.addEventListener('drop', function(e) {
e.stopPropagation();
e.preventDefault();
this.style.border = '2px dashed rgb(200, 200, 200)';
var reader = new FileReader();
reader.addEventListener('load', function(e) {
output.src = e.target.result;
// once the new src img is loaded
output.onload = function() {
c.width = output.width;
c.height = output.height;
ctx.clearRect(0, 0, c.width, c.height);
ctx.drawImage(output, 0, 0, output.width, output.height);
pointillize(ctx);
}
}, false);
reader.readAsDataURL(e.dataTransfer.files[0]); // this line!
}, false);
}
function pointillize(context) {
clearInterval(draw); // before a new animation, clear setInterval
// get new image data
var imgData = context.getImageData(0, 0, c.width, c.height);
// clear canvas
ctx.beginPath();
ctx.rect(0, 0, output.width, output.height);
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fill();
// store the setInterval in a variable so it can be cleared
var draw = setInterval(function() {
for (var i = 0; i < 100; i++) {
// pick random integers x and y
var y = Math.floor(Math.random()*output.height);
var x = Math.floor(Math.random()*output.width);
// get its position in the array
var loc = (y*output.width + x)*4;
// alpha in rgba goes from 0 to 1
var r = imgData.data[loc];
var g = imgData.data[loc+1];
var b = imgData.data[loc+2];
var a = 0.5;
ctx.beginPath();
ctx.arc(x, y, 2, 0, 2*Math.PI);
ctx.fillStyle = 'rgb(' + r + ',' + g + ', ' + b + ',' + a + ')';
ctx.fill()
}
}, 50); // closing setInterval()
}
document.addEventListener('click', clearCanvas, false);
function clearCanvas() {
//interesting, so clearRect is working, for one frame...
ctx.clearRect(0, 0, c.width, c.height);
}
I have an image on canvas or a set of images that i draw on the canvas. I can draw them fine but I want to change the window level of the image on canvas by dragging the mouse over it. I've seen a lot of external javascript api's but they're quite huge and i don't want to use them for this purpose.
here's my JSFIDDLE that is basically drawing an image on the canvas
this is how my code looks
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
// Specify the src to load the image
img.src = "http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample5_l.jpg";
i need something with basic JS or JQuery. it would be great if you can point me in the right direction using a sample code.
Thanks in advance.
If you want to use JavaScript, try something like:
<script>
var c = document.getElementById("drawingboard");
var ctx = c.getContext("2d");
var mouseDown = 0;
document.body.ontouchstart = function() {
mouseDown+=1;
}
document.body.ontouchend = function() {
mouseDown-=1;
}
function draw(event){
ctx.color='gold';
ctx.fillStyle = "lime";
ctx.drawImage(img,event.clientX,event.clientY);}
</script>
This is what I gained after some research:
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const rangeMin = level - window / 2;
const rangeMax = level + window / 2;
const totalSize = canvas.width * canvas.height;
for (let idx = 0; idx < totalSize; idx++) {
if (imageData.data[idx] < rangeMin) {
imageData.data[idx] = 0;
} else if (imageData.data[idx] > rangeMax) {
imageData.data[idx] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
here is the jsfiddle
i have this as my source canvas
HTML
<h1>Source Canvas</h1>
<canvas id="source" width=436 height=567></canvas>
<h1>Destination Canvas</h1>
<canvas id="destination" width=436 height=567></canvas>
javascript
var sourceImage, ctx, sourceCanvas, destinationCanvas;
//get the canvases
sourceCanvas = document.getElementById('source');
destinationCanvas = document.getElementById('destination');
//draw the source image to the source canvas
ctx = sourceCanvas.getContext('2d');
function start() {
ctx.drawImage(img1, 0, 0);
ctx.globalCompositeOperation = "source-atop";
var pattern = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
ctx.fillStyle = pattern;
ctx.fill();
ctx.globalAlpha = .10;
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img1, 0, 0);
//ctx.globalAlpha = 1;
}
var img1 = new Image();
var img = new Image();
img.onload = function () {
img1.onload = function () {
start();
}
img1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png";
}
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png";
i want to to show what is in source canvas in my destination canvas.
i tired
var image, destinationCtx;
//create the image
image = new Image();
//get the base64 data
image.src = sourceCanvas.toDataURL('image/png');
//get the destination context
destinationCtx = destinationCanvas.getContext('2d');
//copy the data
destinationCtx.drawImage(image, 0, 0);
//done
but having no luck. am i missing something?
Copy via imageData,Copy via Base64 data,Copy via direct draw any method will do my job.
when i try with
http://jsperf.com/copying-a-canvas-element
it copies but when i put my source canvas writer it does not work ? am i missing something?
You can directly copy one canvas over other. Like this...
var destinationCtx;
//get the destination context
destinationCtx = destinationCanvas.getContext('2d');
//copy the data
destinationCtx.drawImage(sourceCanvas, 0, 0);
You can use getImageData from the source canvas and putImageData to the destination canvas.This is the fastest one compare to other ways.
var sourceCtx, destinationCtx, imageData;
sourceCtx = sourceCanvas.getContext('2d');
destinationCtx = destinationCanvas.getContext('2d');
imageData = sourceCtx.getImageData(0, 0, sourceCanvas.width - 1, sourceCanvas.height - 1);
destinationCtx.putImageData(imageData, 0, 0);
source:/ https://jsperf.com/copying-a-canvas-element
I am having a really difficult time resetting / clearning the contents of my canvas. I am currently using the : Sketch.js plugin to generate a free form canvas. It does exactly what I need it to, however, it does not seem to have an simple canvas 'reset' function call to clear the contents.
jsfiddle:
http://jsfiddle.net/k7fmq/
NOTE: I read that the 'width' method does not work in chrome, and both methods don't seem to work on a 'free-form' canvas, but only on shapes, which I did not test.
This is what I tried so far:
Markup
<div class="signature-field">
Signature:
<span class="sketch-container">
<canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
<span class="save-signature">Save Signature</span>
<span class="reset-canvas">Reset Canvas</span>
</span>
Date: <input type="text"><br/><br/>Name: <input type="text">
</div>
JQuery (My latest attempt)
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("#simple_sketch");
var width = myCanvas.width;
myCanvas.width = width + 1;
});
Method 2:
$('.reset-canvas').click(function() {
canvas.width = canvas.width;
});
Method 3:
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
Try this: http://jsfiddle.net/k7fmq/1/
The sketchpad plugin keeps an array of "actions", and redraws them each update (which seems unnecessary, really, but whatevs).
var sktch = $('#simple_sketch').sketch(); // store a reference to the element.
var cleanCanvas = $('#simple_sketch')[0];
$('.save-signature').click(function(){
/* replace canvas with image */
var canvas = document.getElementById("simple_sketch");
var img = canvas.toDataURL("image/png");
$('#simple_sketch').replaceWith('<img src="'+img+'"/>');
$('.signature-buttons').replaceWith('');
});
$('.reset-canvas').click(function(){
sktch.sketch().actions = []; // this line empties the actions.
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
Try this:
var ctx = myCanvas.getContext('2d');
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.restore();