it possible to 'fillpattern in images' using node.js npm canvas ?
I tried following way.but i got the error
return new CanvasPattern(image);
^
Error: Image given has not completed loading.
exports.convertImg = function(story){
var Canvas = require('canvas')
, canvas = new Canvas(200,200)
, ctx = canvas.getContext('2d'),textDimensions, img = new Canvas.Image;
var textWidth = ctx.measureText(story).width;
img.src = "/images/fillimage.png";
var buffer = new Buffer(story, "base64"),length=buffer.length;
var pat=ctx.createPattern(img,"repeat");
ctx.fillStyle = pat;
ctx.font = "20px verdana";
var x= (canvas.width -200) / 2;
var y= 60;
wrapText(ctx,story,x,y,200,200);
var imges = canvas.toDataURL();
var data = imges.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
var length=buf.length;
return images;
}
how can i fill background images in canvas fillpattern. plz help me.
Thanks.
Related
I'm trying to get a spectroscope (sine wave) to show while an audio file is playing. The audio file plays fine but the graph only shows a flat line:
function play() {
var audio = document.querySelector('audio');
audio.load();
audio.play();
var context = new (window.AudioContext || window.webkitAudioContext)();
var source = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;
source.connect(context.destination);
var canvas = document.querySelector('canvas');
var canvasCtx = canvas.getContext('2d');
var drawVisual;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
analyser.fftSize = 2048;
var bufferLength = analyser.fftSize;
var dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
var draw = function() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(255, 255, 255)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(255, 0, 255)';
canvasCtx.beginPath();
var sliceWidth = WIDTH / bufferLength;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var y = v * HEIGHT / 2;
if(i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height / 2);
canvasCtx.stroke();
};
draw();
}
<audio loop src="data:audio/ogg;base64,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UkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSqmklFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimVUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFIKAJCKcACQejChDBQashIASAUAAIxRSinGnIMQMeYYY9BJKClizDnGHJSSUuUchBBSaS23yjkIIaTUUm2Zc1JaizHmGDPnpKQUW805h1JSi7HmmmvupLRWa64151paqzXXnHPNubQWa64515xzyzHXnHPOOecYc84555xzzgUA4DQ4AIAe2LA6wknRWGChISsBgFQAAAIZpRhzzjnoEFKMOecchBAihRhzzjkIIVSMOeccdBBCqBhzzDkIIYSQOecchBBCCCFzDjroIIQQQgcdhBBCCKGUzkEIIYQQSighhBBCCCGEEDoIIYQQQgghhBBCCCGEUkoIIYQQQgmhlFAAAGCBAwBAgA2rI5wUjQUWGrISAAACAIAclqBSzoRBjkGPDUHKUTMNQkw50ZliTmozFVOQORCddBIZakHZXjILAACAIAAgwAQQGCAo+EIIiDEAAEGIzBAJhVWwwKAMGhzmAcADRIREAJCYoEi7uIAuA1zQxV0HQghCEIJYHEABCTg44YYn3vCEG5ygU1TqIAAAAAAADADgAQDgoAAiIpqrsLjAyNDY4OjwCAAAAAAAFgD4AAA4PoCIiOYqLC4wMjQ2ODo8AgAAAAAAAAAAgICAAAAAAABAAAAAgIBPZ2dTAAQiVgAAAAAAAGJlAAACAAAAPuePCyUVNCgpJykqMhMUFBQfHwEBAQEBAQEBAQEBAQEdEzctLSorKy05DN3v80/tzuTbDAAIjkoywUfOEcIE+hpP+uN/gfj5tZru2igfgIQDAAAAAAAAQAEAoAc3r//fwfNvv/rq+Zf287YCJEmyCLVtAF4r78vbHxDkgw/cXzRKwAMAfv4QAL4OAAAAAAAAAAAAAJ7KAACUfwBeK+/L2x8Q5IMP3F80SoEHAPz8oQC8agAAAAAAAAAAAAB+NgsAUPcKAF4r78vbH1DkAyvuzxplAiQcAAAAAAAAAGoAVgAA8L/mpgAA8WWjAF4r7+PbPwDi/PbA/a1EKfAAgH9/EYCtAAAAAAAAAAAAAFCvUQAAPBgAXivvy9sfIPLBF+7PGiXgJACAbwAAAAAAAAAAAACAmmMAFHhiAACgMpUAFhtv8kvCS8N+Pj8wNzFQwkPX148e1XWNnjoAHQAAAAAAAAAIn45Uqd4jhK0agAfgDgFM7+99+cuBAAAA4BkbeKnpdxEAVO/v4xZaAwAAAJwRcO718GsOSABM7+99+VsDAAAA+lPC93HqWwI0AETv7/NrWgMAAAD6DwF3X5ddAkgAbGHK5YvHI8F64jVDQ8WPV23Gj1dtTo+/76dH77FDAaRMdby4jQQ2sj3eJY6lXhSNpV6sjN1drMzdlStuhwAKDg4OBgAAAAAAAAAALNkvru5u3yUwvf56EPWqzemN99h41eb0xntsPANM6+/jO5Ly/rGyAQAAQJOIESgAOhuP9CXJluV/OJCf5ewtPDjPT58+PSfsawCADigAAAAAAADak7cmS87/Oz6JMcYYc4wKUXsAAF4rj+vbH6DbB3457i+aCE4CAPgGAAoAAAAAAAAAAKDmGAD0eGIAAACqC4MBAF4rj+vbH6DbB3457i+aCE4CALgGgAIAAAAAAAAAAPCzAgBnfDUAAADV1+EBAF4rj8v7f93N+f2X4/46oznBAwD+9h0A/C0AAAAAAAAAAAAAdwEAAFj1AF4r9/uHP4CwD3y63Z81mgtOAgB4AAAAAAAAAAAAAAAYTQBwemwKAACMxwNeK4/r2x+A2wd+Oe4vGs0DJwEA/A4AAAAAAAAAAAAAlJ0AgNMwIwAAMK46XiuP41vCSzfnt98dz28lugA8AODfHw4Afk4AAAAAAAAAoAjVA1ToBgAAWP4BPro26EcSKvkNW8cpZ2/hoTcGkM/TAQAjoVAAFAoAAOHdL++QeFPqn83NVQAoN6EBEgCPADSACYAC"></audio>
<br>
<canvas width="640" height="100"></canvas>
<br>
<button onclick="play()">Play</button>
Note the audio source is hardcoded here to avoid CORS issues; normally audio.source would be set on line 3 immediately after the audio var is initialized, e.g.
var audio = document.querySelector('audio');
audio.src = 'https://www.example.com/foo.mp3';
The AnalyserNode is not connected yet. It needs to get the signal as an input which you want to analyze.
You can achieve that by changing the following line ...
source.connect(context.destination);
... into ...
source.connect(analyser).connect(context.destination);
In my vb.net Project with Selenium, I have a set of JS statements to convert html to canvas to image and then download to file. The code so far is as follows:-
driver.ExecuteScript("
var url = '" + str + "';
var pages = [],
heights = [],
width = 0,
height = 0,
currentPage = 1;
var scale = 1.5;
PDFJS.disableWorker = true; // due to CORS
PDFJS.getDocument(url).then(function(pdf) {
pdf.getPage(currentPage).then(function(page) {
console.log('Printing ' + currentPage);
var viewport = page.getViewport({
scale: scale,
});
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render(renderContext).then(function() {
pages.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
heights.push(height);
height += canvas.height;
if (width < canvas.width) width = canvas.width;
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
for (var i = 0; i < pages.length; i++)
ctx.putImageData(pages[i], 0, heights[i]);
document.body.appendChild(canvas);
var element = document.createElement('a');
element.setAttribute('href', document.getElementById('rakCanvas').toDataURL('image/png'));
element.setAttribute('download', '" + fileName + "');
console.log('Raky ========>' + url);
element.style.display = 'block';
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
return 'Done Rak';
});
});
});
Using jsfiddle, I found the JS code to be without any syntax errors. There are no errors during compiling and execution. And there is no file downloaded. To figure out the problem, I am looking for a way to monitor execution of each statement of above js code.
Alternatively, if there is a code chuck that could help in just converting the HTML canvas to Image to be downloaded as a file.
I am trying to convert canvas to dataURL by calling canvas.dataURL() method. It is working proper for some images with size 938x657 but when I try same function with large image size(for eg. 3750x2625, 7500x5250, etc) it returns "data:,"
Code:
var img = new Image();
img.src = app.getThemeLocalStorage("imgPath");
img.onload = function()
{
alert("width:"+img.width+" height:"+img.height);
$("#DummyCanvas").attr("width", img.width + "px");
$("#DummyCanvas").attr("height", img.height + "px");
var dummyCAN = document.getElementById("DummyCanvas");
var ctx = dummyCAN.getContext("2d");
ctx.drawImage(img, 0, 0);
var data = dummyCAN.toDataURL("image/png");
alert(data); //Alerts data url for image size 938x657 but blanks for 3750x2625
}
Any suggestion/solution?
I am trying to rasterize some SVG data to a PNG and it is not working. Could someone please tell me what I am doing wrong?
This code does not seem to have any data in the BitmapData object.
var color:uint = Math.floor( (Math.random() * 0xFFFF00) + 0x0000FF);
var graphic:Graphic = new Graphic();
graphic.graphics.beginFill(color);
var pathData:String = "M 0 0 L 0 40 L 40 40 L 40 40 Z";
var path:Path = new Path();
path.data = pathData;
path.x =0;
path.y=0;
path.width = 40;
path.height = 40;
path.stroke=new SolidColorStroke(100);
path.fill=new SolidColor(100);
path.winding = GraphicsPathWinding.EVEN_ODD;
graphic.addElement(path);
graphic.width = 40;
graphic.height = 40;
graphic.validateNow();
var FillColor = 0x00000000;
var bitMapData:BitmapData = new BitmapData(graphic.width,graphic.height, true, FillColor);
bitMapData.draw(graphic);
But this code does:
var graphic:Graphic = new Graphic();
graphic.graphics.beginFill(color);
var width:Number = Math.floor(Math.random() * (MAXWIDTH-MINWIDTH)) + MINWIDTH;
var height:Number = Math.floor(Math.random() * (MAXHEIGHT-MINHIEGHT)) + MINHIEGHT;
var radius:Number = Math.floor( (Math.random()*(MAXRADIUS-MINRADIUS)))+MINRADIUS;
width = height = radius*2;
graphic.graphics.drawCircle(radius, radius,radius );
graphic.graphics.endFill();
var FillColor = 0x00000000;
var bitMapData:BitmapData = new BitmapData(graphic.width,graphic.height, true, FillColor);
bitMapData.draw(graphic);
if I do:
var temp:Graphic = new Graphic();
temp.graphics.beginFill(0x000000);
temp.graphics.drawRect(0,0,width/2, height/2);
temp.graphics.endFill();
sprite.graphics.drawRect(0,0,width, height);
sprite.addElement(temp);
both rectangles draw on canvas, but
BitMapData.draw(sprite);
only shows the toplevel sprite.
So I figured it out. Paths use BeforeDraw(), Draw(), and EndDraw(), which performs the fill and stroke operations. The problem is that these functions dont get called until the path gets rendered on the canvas. So, I extended my path class and over-rode the EndDraw() function. In this function I dispatched an event. Then, when I catch the event I can get the DisplayObject from the path (which is now filled in) and pass that object into BitmapData().
i've got a problem with canvas in html. I want to draw multiple canvas images.
I have created a loop which creates multiple canvas and then i want to draw in each canvas an image.
for (var i = 1; i <= playerStuff.MovingCards.length; i++){
$("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
width='"+movingCardSizeX+"'\n\
data='"+playerStuff.MovingCards[i-1].movePoints+"'></canvas>");
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField'+i).getContext("2d");
imgObj.onload = function(){
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
}
The result is that only the last canvas has a drawn image. What am I missing here?
Please dont use JQuery for this. In generally i'm not a friend of JQuery but thats my personally opinion,but here you should really dont useit, use the DOM its much more faster.
var playersField=document.getElementById("playersField");
var canvasElements=new Array ();
var canvasElement, drawField,imgObj;
var drawFields=new Array ();
for (var i = 0; i <= playerStuff.MovingCards.length; i++)
{
canvasElement=document.createElement ("canvas");
canvasElement.height=movingCardSizeY;
canvasElement.width=movingCardSizeX;
canvasElement.data=playerStuff.MovingCards[i-1].movePoints;
playersField.appendChild(canvasElement);
drawField=canvasElement.getContext("2d");
drawFields.push (drawField);
imgObj = new Image();
imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
imgObj.index=i;
imgObj.onload = function (){
drawFields[this.index].drawImage(this, 0,0);
};
that is becouse onload y asinchronous, when al the iterations of the for has ended, the onload is probably that has not been called. then drawField variable is the last element. to solve this in a fast way (but not the cleanest solution)
the scope of a varaible is not as it could be in c++ or other languages.
for (var i = 1; i <= playerStuff.MovingCards.length; i++){
(function(element) {
$("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
width='"+movingCardSizeX+"'\n\
data='"+element.movePoints+"'></canvas>");
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField'+i).getContext("2d");
imgObj.onload = function(){
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/"+element.name;
})(playerStuff.MovingCards[i - 1]);
}
this may do the trick, more or less, I didn't check twice the code
btw is not very efficient also
this should be something better
var domElement = $("#playersField");
var canvasStart = "<canvas id='movingCardsField";
var canvasEnd = "' height='"+movingCardSizeY + "'width='" + movingCardSizeX + "' data='" + element.movePoints + "'></canvas>";
function createCanvas(element) {
var canvas = canvasStart + (i + 1) + canvasEnd;
domElement.append(canvas);
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField' + (i + 1)).getContext("2d");
imgObj.onload = function() {
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/" + element.name;
}
for (var i = 0; i < playerStuff.MovingCards.length; i++) {
createCanvas(playerStuff.MovingCards[i]);
}