We Keep Coding

Manipulating image within Indesign frame

I am currently trying to figure out how to change the color of a bitmapped image within indesign using basil.js. Ideally I would like to place the image and use some sort fo post styling to change the color.
var myImage = image('image_0009_10.psd', 0, 0, width, height);
property(myImage, "fillColor", "RISOBlue");
Right now I am using fillColor but that only changes the color of the frame that the bitmap live within. Anyone got any ideas as to how to edit the contents of a graphic frame? Specifically a bitmap?

fabianmoronzirfas is correct that you have to target the graphic of the image frame, I just want to suggest a slightly different syntax, which is a bit more basil-like to achieve the same thing:
// #include ~/Documents/basiljs/basil.js
function draw() {
var myImage = image('~/Desktop/someImage.psd', 0, 0);
var myGraphics = graphics(myImage);
property(myGraphics[0], 'fillColor', color(0, 0, 255));
}
Note the use of the graphics() function to get the actual graphics within an image rectangle.

Welcome to STO 👋 🎉 🎈
You are currently setting the fillColor for the Rectangle that contains the image. You will have to select the image explicitly since it is a child object of that Rectangle. See:
Rectangle
Images
Image
The code below is tested with InDesign 14.0.1 and the current Basil.js Develop version 2.0.0-beta
// #include "./basil.js"
function setup() {
var doc = app.activeDocument;
var imageFile = file(new File($.fileName).parent + "/img.bmp");
var img = image(imageFile, 0, 0, 100, 100);
img.images[0].fillColor = doc.swatches[4];
}

graphics() is perfect for this (as #mdomino mentioned) – but can also just grab that property of the image:
var myImage = image('image_0009_10.psd', 0, 0, width, height);
property(myImage.graphics[0], "fillColor", "RISOBlue");
Running inspect(myImage) will give a long laundry list of available properties.

canvas toDataURL() returns transparent image

I am attempting to use a chrome extension to take a screenshot of the current page, and then draw some shapes on it. After I have done that to the image, I turn the whole thing into a canvas that way it is all together, like the divs I have drawn on it are now baked into the 'image', and they are one in the same. After doing this, I want to turn the canvas back into a png image I can use to push to a service I have, but when I go to use the canvas.toDataURL() in order to do so, the image source that it creates is completely transparent. If I do it as a jpeg, it is completely black.
I read something about the canvas being 'dirtied' because I have drawn an image to it, and that this won't work in Chrome, but that doesn't make sense to me as I have gotten it to work before, but I am unable to use my previous method. Below is the code snippet that isn't working. I am just making a canvas element, and then I am drawing an image before that.
var passes = rectangles.length;
var run = 0;
var context = hiDefCanvas.getContext('2d');
while (run < passes) {
var rect = rectangles[run];
// Set the stroke and fill color
context.strokeStyle = 'rgba(0,255,130,0.7)';
context.fillStyle = 'rgba(0,0,255,0.1)';
context.rect(rect.left, rect.top, rect.width, rect.height);
context.setLineDash([2,1]);
context.lineWidth = 2;
run++;
} // end of the while loop
screencapImage.className = 'hide';
context.fill();
context.stroke();
console.log(hiDefCanvas.toDataURL());
And the image data that it returns is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC which is a blank, transparent image.
Is there something special I need to do with Chrome? Is there something that I am missing? Thanks, I appreciate the time and help.

Had the same problem, and found the solution here:
https://bugzilla.mozilla.org/show_bug.cgi?id=749824
"I can confirm, that it works if you set preserveDrawingBuffer.
var glContextAttributes = { preserveDrawingBuffer: true };
var gl = canvas.getContext("experimental-webgl", glContextAttributes);"
After getting the context with preserveDrawingBuffer, toDataURL just works as expected, no completely transparent or black image.

Having a similar problem I found a solution, thanks to the following post
https://github.com/iddan/react-native-canvas/issues/29.
These methods return a promise, so you would need to wait for it to resolve before the variable can be populated.
My solution was to set asyn function and await for the result:
const canvas = <HTMLCanvasElement>document.getElementById("myCanvas")[0];
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = async (e) => { ctx.drawImage(img, 0, 0); ctx.font = "165px Arial";ctx.fillStyle = "white"; b64Code = await (<any>canvas).toDataURL(); }

Canvas element + Javascript working in Chrome and Firefox, not in Internet Explorer

I am using a modified version of the Leaflet FullCanvas Plugin to draw lines on a map. These lines work perfectly find on Firefox and Chrome, but on Internet Explorer (version 11, I'm using Windows 8.1) these lines never get reset when moving/zooming the map. I made a Fiddle to illustrate the problem:
http://jsfiddle.net/tee99z65/
Try dragging and zooming while on Chrome or Firefox, and then Internet Explorer (11). What is going on in this code? The method that gets called every time the lines need to be redrawn is drawCanvas() :
drawCanvas: function () {
var canvas = this.getCanvas();
var ctx = canvas.getContext('2d');
var me = this;
ctx.clearRect(0, 0, canvas.width, canvas.height);
var bounds = this._myMap.getBounds();
if (!this.options.filterPointsInBounds) bounds = new L.LatLngBounds([-90, -180], [90, 180]);
var points = this._myQuad.retrieveInBounds(this.boundsToQuery(bounds));
points.forEach(function (point) {
var d = point.data;
if (d.draw && !d.draw(d)) return; // allows dynamic filtering of curves
var spoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.slat, d.slon));
if (d.tlat && d.tlon) {
var tpoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.tlat, d.tlon));
me.drawCurve(point, spoint, tpoint, d.style ? d.style(d) : null);
}
});
},
Does anyone have any idea what's going on here? A fix would be nice, but I'm already happy if anyone can point out why this is happening so I can attempt a fix myself.

Why?
Because mousewheel events are not yet standardized. (Note to browser makers: Seriously!???, why have you not standardized the mousewheel event yet. Scrolling mice have been around for years! -- end of rant/ ).
Fix:
You will have to listen for the mousewheel event on IE instead of the DOMMouseScroll event that most other browsers listen for. I don't work with leavlet, but that appears to be where you need to add the fix.

Problem solved:
http://jsfiddle.net/tee99z65/3/
The function that draws the curve, drawCurve(), has been edited from:
ctx.moveTo(startPoint.x, startPoint.y);
ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
ctx.stroke();
To:
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
ctx.stroke();
ctx.closePath();
Lesson learned: never forget about beginPath() and closePath().

Template for canvas html5/jquery/javascript

I am a beginner at HTML5, Jquery/JavaScript.
I am attempting to create a canvas (sort of like windows paint application) and I am looking at other users sample functions/code to see whats it going on and attempt to re-create it.
$(function(){
var paint = new Paint($('#surface').get(0));
// Setup line template
var templateLine = new Paint($('#toolbar #line').get(0), {'readonly': true});
templateLine.shape = new Line([10, 10], [50, 50]);
templateLine.place(templateLine.shape);
I am unsure what is going on here. I know this new Paint is not an internal built-in function. What is it?
Secondly whats the difference between this and
$( document).ready(function(){
var canvas = $("#canvas").get(0);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Choose a color
ctx.fillStyle = "black";
ctx.strokeStyle = color;
ctx.fillRect(0, 0, 50, 50);
} else {
// Browser doesn't support CANVAS
}
});
Help!!!

Well, first off, the code you're looking at in the beginning of your question was probably using some canvas library or API, but that is not the vanilla HTML5 Canvas API, making it completely different from what you've written below, even if they have the same output (although it doesn't look like they do).
Secondly, color is not defined, so unless that's defined in your code somewhere else, your code's not going to work. Otherwise, your code will draw a black rectangle in the corner of the canvas with the stroke color of whatever color is.

Drawing graphics in ExtJs

First off I want to point out that I'm very new to the ExtJs library. I want to create an image through the use of some drawing/canvas API. The image I want to create is similar to the below image.
I'm wondering if this is possible through javascript/Extjs because I haven't been able to find anything online that makes this clear. If you can think of a different kind of approach I would appreciate that as well.

I don't know of a canvas API for Ext. But you can easily use the canvas API with Ext. I fiddled it.
Markup:
<canvas id="c1"></canvas>
JavaScript:
Ext.onReady(function() {
draw(document.getElementById('c1'));
});
function draw(el) {
var canvas = el;
var ctx = canvas.getContext("2d");
ctx.strokeRect(0, 0, 50, 200);
for(var y = 10; y < 200; y += 10){
ctx.moveTo(0, y);
ctx.lineTo(25, y);
}
ctx.stroke();
ctx.closePath();
}

As far as I know ExtJS 3.x does not have any API that would facilitate canvas drawing. As Josiah says, you need to stick with plain JavaScript API for that, but you can still use ExtJS to manage your Elements and Components.