Sorry for my English.
I am developing an automate extension for Cava,Photopea and Kittl.
Our chrome extension will read value from csv file and auto replace text on a design.
Example: I am designing a template for T-SHIRT and I have two text element "Name", "Slogan" on this design.
In the CSV file, I list the values for Name and Slogan. Our app will find and replace text , then save as result as png.
I have implemented my idea successfully for Cana and Photopea, but cannot for Kittl.
The problem is I couldn't see these elements on HTML page when I inspected. Therefore, I cannot use javascript to select these elememts and replace text.
T-Shirt Sample
I thought they are using canvas HTML, but I tried to get a context and fill a text but its failed.
I am wonder how they hide these elements and what is the solution to select a element on design of Kittl.
What you want to do is simply not possible. Kittl uses an HTMLCanvasElement to render its graphics. Canvases do not expose references to document-like structures where you can query elements. At most you can inspect "baked" pixel data, or programmatically draw new stuff on top what already exists.
if you are trying to develop an extension that will automate the process of replacing text in a design using data from a CSV file, and you are having trouble doing so for a website that uses a canvas element to render text, you will need to use the canvas API to manipulate the text. The canvas API provides methods for drawing text and other graphics onto the canvas, and you can use these methods to select and manipulate text elements that are rendered onto the canvas. You can also use the measureText method to measure the width of the text and position it on the canvas as desired.
example how you use the canvas API to draw text onto a canvas element:
let canvas = document.getElementById('my-canvas');
let ctx = canvas.getContext('2d');
ctx.font = '48px sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText('Hello, World!', canvas.width / 2, canvas.height / 2);
Related
Examples I see using <canvas> always have an actual canvas element in the HTML. Say I for example already have a <header> element that I would like to draw on, is there a way to use it as a canvas directly? Or do I need to add that canvas element and make sure it's filling the header?
I was skeptical at first, but there is one way to achieve almost that, by using css and getCSSCanvasContext() with the webkit. This allows you to display a canvas as a background so you can control it like a canvas.
Ex:
HTML
<header></header>
CSS
header { background: -webkit-canvas(fooBar); }
JavaScript (when document ready / onload)
function fillCanvas(w, h) {
var ctx = document.getCSSCanvasContext('2d', 'fooBar', w, h);
// draw into canvas
}
A complete example and more specs are given here.
Hope this is convenient.
I have searched a lot, but I could not find a scenario which is relevant to my need. I want to drag and drop images from a toolbar to a canvas, not from a canvas to another canvas.
Please help me on this. Thanks in advance
Demo: http://jsfiddle.net/m1erickson/2Us2S/
Use jquery-ui to create draggable elements.
$("#myToolbarImageElement").draggable();
Load these elements with data payloads which are key-value pairs.
In your case this might be an image object that you want drawn on the canvas.
$("#myToolbarImageElement").data("image",myImageObject);
Set your canvas as a drop zone:
$("#myCanvas").droppable({drop:myDropHandler});
When you drop the elements on canvas you can read the data (image) and drawImage that image to the canvas.
function myDropHandler(e,ui){
var x = ui.offset.left - $("#myCanvas").offset.left;
var y = ui.offset.top - $("#myCanvas").offset.top;
var image = ui.draggable.data("image");
// draw on canvas
drawImage(image,x,y);
}
Here's a nice tutorial on drag-drop elements with data payloads using jquery-ui:
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
I am working on web app in which i have to display PDF file using PDF.JS and there are few area where i have to draw a rectangle and user can click on that which take him to details page. Till now i am able to display pdf and while looking at pdf js i found canvas.js in which all text is draw on canvas using
showText: function CanvasGraphics_showText(glyphs) {} function now i am keeping track of all text those text where i have to draw a rectangle but i am facing some problem to accomplish it. showText function calls many times which creating multiple rectangles. I have done following changes in function
if(glyphs.length ==10){
// common case
var bValue=false;
glyphs.forEach(function(value, index, ar){
var str =['d', 'e', 't', 'a','i','l','='];
if(str.indexOf(value.fontChar)>=0){
bValue=true;
}
});
if(bValue){
ctx.beginPath();
ctx.rect(scaledX, 50, 200, 100);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.font = '20pt Calibri';
// textAlign aligns text horizontally relative to placement
ctx.textAlign = 'center';
// textBaseline aligns text vertically relative to font
// style
ctx.textBaseline = 'middle';
ctx.fillStyle = 'blue';
ctx.fillText("Click", 120, 100);
}
}
glyphs is array of objects and i am searching for values define in str.
Can any one please point me into right direction ?
Thanks in Advance.
It's not really possible to do this directly. Canvas is, fundamentally, a bitmap-based graphics engine: the only things it remembers from call to call are the values of the pixels inside it. You can draw text, but once you've done that, the canvas doesn't know that it's text anymore. That's why you can't search for it inside the image.
The quickest and easiest way around this is to keep track of the text somewhere else. #ZachSaucier's comment mentions this possibility. I see that you're concerned about performance, but the alternative would be to implement some kind of OCR algorithm to extract the text from the bitmap. There's no standard way to do that, so you'd have to implement OCR yourself, and it would be much slower than storing the text in a variable.
Another option would be to use SVG instead of Canvas. SVG isn't bitmap-based, so when you put text into an SVG image, the engine can remember that it's text, and you could search within that. However, drawing things in SVG is very different from drawing them in Canvas, so unless you're already using a library that can work with either one, you would have to rewrite your drawing code. That might not be feasible for what you're trying to do.
I'm learning some game dev with JavaScript, so I wanted to use HTML5 canvas to draw on the screen. The problem is that I can't get it to display text.
You can see my code here (you might be greeted by a prompt asking a name for your chatracter) http://jsfiddle.net/LAmC3/
Essentially i only used:
canX.font = '80pt Helvetica';
canX.fillText(player.getName(),100, 100);
With canX being the context of my canvas which has the same dimensions as the viewport.
If anyone knows why, please let me know.
You're drawing the text in the same colour as the background, set the fillStyle to something new, e.g.
canX.fillStyle = '#FFFFFF';
Background
I've got a bunch of svg's in a document (with rect, path, and whatnot inside each) and I need to draw this out to a downloadable PNG image. I understand that in order to do this there are two methods: either draw the page's HTML structure to a canvas and then export from there or render an SVG and its contents straight onto a canvas.
Hypotheses
The first hypothesis I tried to render the HTML structure using html2canvas and only found out that SVG's could not be rendered via an HTML structure at all (due to security issues). The second hypothesis I tried to render an SVG to canvas via canvg only to find out that it only allowed for one SVG element to be rendered and that only the first one would be rendered.
Results
To prove the first one wrong, type in http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect to this URL and disable Javascript. To prove the second one wrong I have a fiddle to try out.
The Question
I want to make it clear that my reasoning for having multiple svg's is so that I can place them within a responsive grid system and resize via aspect ratio. Without further ado, I ask my question: How can you render multiple svg elements to a canvas? If the answer to that question is "it isn't possible", then next my question would be: Should I be rendering one svg instead and handle responsiveness another way?
You should be able to draw SVG to canvas just as any other image:
var img1 = document.createElement('img'),
img2 = document.createElement('img')
count = 2;
/// image loading is async, make sure they are loaded
img1.onload = img2.onload = function() {
count--;
if (count === 0) drawImages();
}
img1.src = 'some1.svg';
img2.src = 'some2.svg';
/// when loaded, draw them somewhere on the canvas
function drawImages() {
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img2, someX, someY);
}
That being said - there are a couple of restrictions:
FireFox currently does not want to draw images properly without width and height set inside the SVG file.
CORS (Cross-Origin Resource Sharing) applies if you want to extract images as bitmap (toDataURL/getImageData). If not they should work as normal.