Here is my JS code :
UTIF._imgLoaded = function(e)
{
var page = UTIF.decode(e.target.response)[0], rgba = UTIF.toRGBA8(page), w=page.width, h=page.height;
var string = rgba.join();
console.log("rgba : ", rgba);
var ind = UTIF._xhrs.indexOf(e.target), img = UTIF._imgs[ind];
UTIF._xhrs.splice(ind,1); UTIF._imgs.splice(ind,1);
var cnv = document.createElement("canvas"); cnv.width=w; cnv.height=h;
var ctx = cnv.getContext("2d"), imgd = ctx.createImageData(w,h);
for(var i=0; i<rgba.length; i++) imgd.data[i]=rgba[i]; ctx.putImageData(imgd,0,0);
var attr = ["style","class","id"];
for(var i=0; i<attr.length; i++) cnv.setAttribute(attr[i], img.getAttribute(attr[i]));
img.parentNode.replaceChild(cnv,img);
document.getElementById("myText").innerHTML = string;
}
I get a Uint8Array() RGBA of image, here is console.log of this :
Here is image with rgba array as a string in HTML:
Is that possible to manipulate this array, to ex. change colors? Thanks for help!
Related
I'm trying to build a table that the user can hit "new line" to create a new row of the table. I do this by foo.push(document.createElement("INPUT"));
function newLine() {
sArr.push(document.createElement("INPUT"));
sArr[sArr.length-1].setAttribute("type", "text");
document.body.appendChild(sArr[sArr.length-1]);
gArr.push(document.createElement("INPUT"));
gArr[gArr.length-1].setAttribute("type", "text");
document.body.appendChild(gArr[gArr.length-1]);
tArr.push(document.createElement("INPUT"));
tArr[tArr.length-1].setAttribute("type", "text");
document.body.appendChild(tArr[tArr.length-1]);
//alert(sArr.length+", "+gArr.length+", "+tArr.length);
var x = document.createElement("br");
document.body.appendChild(x);
}
function calc(){
var temp = 0;
var total = 0;
for(i = 0; i<sArr.length; i++){
total = total + calc2(i);
}
var o = document.getElementById("output");
o.value = total;
}
function calc2(i){
alert(i);
var s = document.getElementById(sArr[i]);
var g = document.getElementById(gArr[i]);
var t = document.getElementById(tArr[i]);
var VO2walkmin = 3.28;
var VO2rest = 3.05;
var C1 = 0.32;
var C2 = 0.19;
var C3 = 2.66;
var Cdecline = 0.73;
var s2 = s.value;
var g2 = g.value;
var t2 = t.value;
var negGrade = g.value;
if(g2 < 0){g2 = 0};
VO2move = ((C1 * g2)+VO2walkmin)+((1+(C2*g2))*(C3*(s2^2)));
VO2inc = VO2rest+(t2*VO2move);
VO2dec = VO2rest+(Cdecline*(t2*VO2move))
//var o = document.getElementById("output");
return VO2inc;
}
When run, I get the error:
Uncaught TypeError: Cannot read property 'value' of null
from line 66. Specifically, this line:
var s2 = s.value;
I'm struggling to find my mistake here... and all help is appreciated.
You create a new element, but it has no ID. And so you can't fetch it by ID. The result of document.getElementById(sArr[i]) will be null.
Check this answer to see how ID can be assigned to a newly created element:
Create element with ID
There's no need to use document.getElementById. sArr[i] is the input element itself, not its ID, so you can just read its value directly.
var s = sArr[i];
var g = gArr[i];
var t = tArr[i];
I try to change stroke color for the group of the path on atrboard. I have document with banch of artboards and icon on each artboards. Each icon contains several groups of the figure. And I have to change that on each artboard. How can I do this with JavaScript in Adobe Illustrator? Thanks.
var doc = app.activeDocument;
var strokeColor = {"red":255, "green":0, "blue":0}
for (i = 0; i < doc.artboards.length; i++) {
doc.artboards.setActiveArtboardIndex(i);
doc.selectObjectsOnActiveArtboard();
var selectedObjects = doc.selection;
var numSelectedObjects = selectedObjects.length;
var docSelection = app.activeDocument.selection;
newRGBColor = new RGBColor ();
newRGBColor.red=strokeColor.red;
newRGBColor.green=strokeColor.green;
newRGBColor.blue=strokeColor.blue;
docSelection.strokeColor =newRGBColor
}
Try:
var doc = app.activeDocument;
var myStrokeColor = new RGBColor();
myStrokeColor.red = 255;
myStrokeColor.green = 0;
myStrokeColor.blue = 0;
for(var i = 0; i < doc.pathItems.length; i++){
doc.pathItems[i].strokeColor = myStrokeColor
}
You may want to take the time to read Adobe's documentation on scripting
To only change the stroke colour of selected items you can use:
var doc = app.activeDocument;
var newRGBColor = new RGBColor();
var mySelection = doc.selection;
newRGBColor.red = 255
newRGBColor.green = 0
newRGBColor.blue = 0
for(var i = 0; i < doc.mySelection; i++){
mySelection[i].strokeColor = newRGBColor
}
In one function I have a loop that creates 10 images using the createElement();. In the other function I have another loop that contains info that I need to add text after each picture but my code adds it at the end of all 10 pictures I need them to be after every corresponding picture.
This is the function that displays the text:
function displayAlbum(json){
for (var x = 0; x<json.length;x++){
var span1 = document.createElement("span");
span1.innerText = json[x].album;
console.log(json[x].album);
var display = document.getElementById("results");
display.appendChild(span1);
}
}
I cant individually set the id of each image because i created them in js. Thanks for the help in advance and no jquery please
for (var x = 0; x<json.length;x++){
var image = document.createElement("img");
image.id = "picture";
image.width = 100;
image.height = 100;
image.src = json[x].cover;
var display = document.getElementById("results");
display.appendChild(image);
var a = document.getElementById("artist");
var y = document.getElementById("year");
var artist = document.getElementById("artist").selectedIndex;//index of value of the switch statement
var year = document.getElementById("year").selectedIndex;//index of value of the switch statement
var realYear = y[year].text;//Value of the selected text
var realArtist = a[artist].text;//Value of the selected text
var display = document.getElementById("Results");
}
This is my second loop. I want displayalbum to appear after every picture. I cannot combine them because of other complications in the code
Try to do something like that: plunker
function displayAlbum(){
for (var x = 0; x < 10 ; x++){ // change to json.length
var span1 = document.createElement("span");
span1.innerText = 'json[x].album';
span1.id = 'span'+x;
var display = document.getElementById("results");
display.appendChild(span1);
}
}
The loop where you are creating images, give a unique id to image like image.id = "picture" + x;
Then change displayAlbum() function to use corresponding image to place the span tag.
function displayAlbum(json){
for (var x = 0; x<json.length;x++){
var span1 = document.createElement("span");
span1.innerText = json[x].album;
console.log(json[x].album);
var display = document.getElementById("results");
var img = document.getElementById("picture" + x); // use unique id of img to access it
if(img.nextSibling) { // if img is not the last node in 'results'
display.insertBefore(span1, img.nextSibling);
} else { // if img is the last node in 'results'
display.appendChild(span1);
}
}
}
You can achieve your goal with single loop and using Figure and FigCaption element , specifically created for this kind of display image with its description
var json = [{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test1"},{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test2"}];
for (var x = 0; x<json.length;x++){
var fig = document.createElement("figure");
var figCap = document.createElement("figcaption");
figCap.innerText = json[x].album;
var image = document.createElement("img");
image.id = "picture";
image.width = 100;
image.height = 100;
image.src = json[x].cover;
var display = document.getElementById("results");
fig.appendChild(image);
fig.appendChild(figCap);
display.appendChild(fig);
}
<div id="results">
</div>
I am trying to get to the img.src of these table cells, but am going wrong somewhere.
var cell = newTable.rows.cells;
var content = newTable.getElementsByTagName('img');
var nodeArray = [];
for(var i = 0; i < content.length; ++i)
{
nodeArray[i] = content[i];
}
var listThem = $(this).attr('src');
console.log(listThem);
Use this :
var content = newTable.getElementsByTagName('img');
for(var i = 0; i < content.length; i += 1) {
var source = content[i]['src'];
//do something
}
getElementsByTagName() returns an array of dom elements.
To access the "src" attribute of a dom element, you can do this : element.src or element['src'];
source will contain the image source.
I have an array as a attribute on a link.
Here is the array
images="["one.jpg","two.jpg"]"
How would I parse through this array and have it read back to me one.jpg,two.jpg?
This is what I am doing now and it is giving me an error back. I don't believe json parsing is whats needed here.
var imgs = $("#"+number).attr("images");
var imgList = jQuery.parseJSON(imgs);
EDIT: ACTUAL CODE
var number = $(this).attr("data-id");
var url = $("#"+number).attr("url");
$(".portfolio-url").html("<h3 class='pacifico'>url</h3><p><a href='http://"+url+"' target='_blank'>"+url+"</a></p>");
var cli = $("#"+number).attr("client");
$(".portfolio-client").html("<h3 class='pacifico'>client</h3><p>"+cli+"</p>");
var pgs = $("#"+number).attr("pages");
pgs = pgs.replace(/\[/g,"");
pgs = pgs.replace(/\]/g,"");
pgs = pgs.replace(/\"/g,"");
var pages = new Array();
pages = pgs.split(",");
var img = $("#"+number).attr("images");
img = img.replace(/\{/g,"");
img = img.replace(/\}/g,"");
img = img.replace(/\"/g,"");
var images = new Array();
images = img.split(",");
var portSkills = "<h3 class='pacifico'>skills</h2>";
portSkills += "<p>";
for (i=0;i<pages.length;i++) {
if (pages[i] != "Clients") {
var finalPage = "";
for (j=0;j<pages[i].length;j++)
{
var ch = pages[i].charAt(j);
if (ch == ch.toUpperCase()) {
finalPage += " ";
}
finalPage += pages[i].charAt(j);
}
portSkills += finalPage+"<br />";
}
}
portSkills += "</p>";
$(".portfolio-skills").html(portSkills);
var imgs = $("#"+number).attr("images");
var imgList = jQuery.parseJSON(imgs);
Basically, its looping through parameters
I'd encourage you to modify your attribute-value format to something along these lines:
<div id="one" data-images="file1.jpg,file2.jpg">Foo, Bar</div>
Note here I'm using a valid data- attribute, and the value of this attribute is just a list of comma-separated filenames. No need to place [ or ] in this value in order to get an array.
Now, to get your array:
var images = $("#one").data("images").split(",");
Which results in the following array:
["file1.jpg", "file2.jpg"]
Don't put that kind of string in the attribute, you could just put a comma separated string instead. (And you could use data attribute.)
For example:
<a id="foo" data-images="one.jpg,two.jpg">foo</a>
then you could get it by:
var imgList = $('#foo').data('images').split(',');
for (var i = 0; i < images.length; i++) {
var image = images[i];
}
For starters:
images = ["one.jpg", "two.jpg"]; is an array, yours is invalid.
to have it read back to you
for(image in images)
console.log(images[image]);
or the jQuery way
$.each(images, function(index){
console.log(images[index]);
});
if its a String that you need to split
then but that is of course if the string looks like this
var img = '["one.jpg", "two.jpg"]';
var images = img.replace(/\[|\]|"| /g,'').split(',');
this will give you an array parsed from a string that looks like an array.
Give the join() method a try:
images.join();
=> "one.jpg,two.jpg"
images.join(", ");
=> "one.jpg, two.jpg"
Edit: To declare your Array:
var images = ["img1", "img2", "img3"];
or
var images = new Array("img1", "img2", "img3");
Then you can use the join() method, and if that still doesn't work, try the following:
// should be true, if not then you don't have an Array
var isArray = (images instanceof Array);