I have an image that was changed through Javascript and that image is placed on top of a background image, however when I look at it on the site you can see a clear square where the image was placed.
I wanted to know if there is a way to fade the images edges and have the background come in, making it look one.
Sidenote. I also wish to avoid JQuery at this time, If possible I would like to achieve this through javascript.
Here you can see the site page: http://imgur.com/a/vC9VV
Javascript code:
// attempting to move the images only
var y = document.getElementById("pic2");
// Sorted by pathing the image to the folder ( can use .. to get in the folder)
y.setAttribute("src", "../images/water_image1.png");
y.style.cssFloat = 'right';
// change the images to the same size as the replacing pic
y.style.width = "400px";
y.style.height = "250px";
// This is sorting out the alignment with the text
y.style.margin = "110px 20px 10px";
y.style.opacity = "0.8";
You could loop through each pixel of image and set the value of its alpha channel depending on distance to closest border of image, then render the result on <canvas>.
For easier but less generic approaches, take a look at this.
Related
I have an image which as a "ruler" (made of basic divs positioned absolute on top of the image) that are use to measure the ends of the image. Now the idea is that if you long press one of the ruler ends (the dots at the end of the line which are draggable), the image in the background would zoom in that point, and follow the dot if the user moves it. I am able to detect the long press but I cannot get the image to zoom and follow the dot once detected. The code below is where I have done the detection and now I should apply the styling to move the image. I thought of using the transition property but couldn't get it to zoom on the dot. Any help is appreciated...
Here's a codesandbox with how the ruler works: Link
Meaningful code:
const x = get('x', varToUse); //This just gives the x coordinate of the ruler end
const y = get('y', varToUse); //This just gives the y coordinate of the ruler end
const image = ruler.current.parentElement.parentElement.childNodes[1].childNodes[1];
if (zoom) {
image.style.transform = `translate(${x * 2}px, ${y * 2}px) scale(2.0)`;
} else {
image.style.transform = `scale(1.0)`;
}
This is what the ruler looks like just to get an understanding:
You can make the image a div with background-image.
.image {
background-image: url({image_url});
}
so this way you can update the image size and position easily with this properties
.image {
background-size: x y;
background-position x y;
}
I think this way is easier to do the image resizing and zoom abilities.
another way is to use a canvas library that can help you a lot they have lots of built in functions.
I think trying it without library is better for now but as it grows try to move to a canvas library
The first reason is that in the code you provided, the DOM element that is being manipulated is a div id='root'. The image should be selected.
I am trying to create a macro in photoshop that will resize my canvas to 4x the size of the existing image, leaving the original image as the upper left quadrant.
Currently I am doing it by hand, just using the crop tool and pulling the right corner down on each photo until it is approximately a 4x larger Square.
The images I am modifying are all squares and I want to create a 4x bigger square leaving the original square as the upper left quadrant.
Effectively it would be like resizing the canvas, pegging the image to the upper left and doubling the two dimensions.
Is this possible, via Javascript or any other method?
Thanks
Corey
Welcome to Stack Overflow
You can adjust the canvas size with a photoshop script. They come in three flavours VB, Applescript or JavaScript.
Here's something to get you started
// Call the source doc
var srcDoc = app.activeDocument;
// get original width and height
var w = srcDoc.width.value;
var h = srcDoc.height.value;
// adjust canvas size four times original
// with the anchor in the top left
srcDoc.resizeCanvas(w*4, h*4, AnchorPosition.TOPLEFT);
You also might want to look at the photoshop CC javascript ref pdf
I'm using Guillotine JS to manipulate the image rotation, scale, positions, x,y, when user has finish making changes, I use html2canvas to get the final image generated inside a div, in this case my div has a class .frame, so, when user zoom in or out move left right up, down, I do this:
html2canvas(target, {
onrendered: function(canvas)
{
var data = canvas.toDataURL("image/png");
//console.log(data);
var imgdata = data.replace(/^data:image\/(png|jpg);base64,/, "");
}
})
I have skip a bunch of code this is the only thing I use, with that I get a 64base code for the image inside my div up to this point everything is ok, the generated image is exactly what is need.
The problem is when rotation is apply to the image, for testing I'm using an image with: width: 1036, height: 615px inside a div with: width:676, height:459px.
This is the generated images
Same as before, different area
Same image but this time it has a rotation 180'
same image, rotation 90'
As you can see every time a rotation is use, the result are wrong.
How can I fix that?
I have used Imagemagick to rote and crop the image using guillotine data, the problem here is that the scale is all messup image width * scale only gives 1 x 1px image as a final result, if I hardcode the width and height the result is the same, so I'd love to find a way to fix the rotation with html2canvas.
TLDR;
given this svg element:
<image width="30" height="48" x="3.75" y="6" href="http://some/image.jpg">
How can I retrieve the image's actual height and width (seeing as it is defined in part by the image's aspect ratio).
I have a d3js script that draws a bunch of <rect>s and a bunch of <image>s.
Now stuff is laid out so that the images fall inside the rects, as though the rects were borders. There is other stuff inside the rects too.
Now each of these images has it's own unique and special aspect ratio and this bothers me because it means each of the rects then has a different amount of blank space. This is untidy.
To avoid this I want to load the images then get the actual image dimensions and then adjust the positions and sizes of the surrounding goodies. The crux of the matter is getting the actual image sizes. How can I do this?
I've googled around a bit and spent some quality time with the debugging console to no avail. Just nothing comes up. I'll keep hunting but an answer would be really nice.
First, set the width attribute only, keep height unspecified.
Then, call the getBBox for the image element.
Note that image box is available after it's properly rendered by the SVG
const image = parent.append('image').attr('xlink:href', url).attr('width', 100);
setTimeout(() => {
const box = image.node().getBBox();
const ratio = box.width / box.height;
}, 0);
This is the best I can come up with. I would be surprised and horrified if there isn't an easier way. Anyway:
add a normal html <img> element with a suitable src.
use js to fetch the image height and width
remove the extra html
Ugly but it works...
Here's some code:
var oImage = document.createElement("img");
oImage.setAttribute("src",sUrl);
document.body.appendChild(oImage);
var iWidth = oImage.width;
var iHeight = oImage.height;
oImage.remove();
Is there any trick to determine if user clicks on given element rendered in canvas? For example I'm displaying rhombus from .png file with transparent background and i want to know if user click inside or outside that figure (like mouse-element collision).
There is no concept of individual elements in a canvas - it is simply just an area that you're drawing pixels onto. SVG on the other hand is made up of elements which you can then bind events to. However there are a few approaches you can take to add click events to canvas:
Position an html element that overlays the area on the canvas you want to be clickable. A for a rectangular area or an image map for something more irregular.
Use separate canvases for each element that you want to be clickable.
CAKE - I haven't used this myself, but it's description is "SVG sans the XML". This may cover your needs. Demos here http://glimr.rubyforge.org/cake/canvas.html#EditableCurve
One idea is to draw the image to a temporary canvas, then use getImageDate() to receive data for the pixel you are interested in, and check if its alpha value is 0 ( = transparent).
The following is a sketch of a solution. It is assumed that...
x and y are the coordinates of the mouse click event
you are looping over gameObjects, the current object being stored in the variable gameObject
the game object has been initialized with an image, x and y coordinates
The following code would then check whether the click was on a transparent area:
var tempCanvas = document.createElement('canvas');
if (tempCanvas.getContext) {
tempContext = tempCanvas.getContext('2d');
}
tempContext.drawImage(gameObject.img, 0, 0);
var imgd = tempContext.getImageData(x - gameObject.x, y - gameObject.y, 1, 1);
var pix = imgd.data;
if (pix[3] == 0) {
// user clicked on transparent part of the image!
}
Note: This is probably quite inefficient. I'm sure someone can come up with a better solution.
I have solve this problem using kintech.js, tutorials and examples can be found: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/