I need to fetch an image from a web site knowing it's URL and then edit it (cropping and resizing) in client side.
What the best way to do this using JavaScript, Jquery, HTML5?
can you provide some links or tutorials,...?
Thanks in advance.
You can use a Javascript Image Processing Framework like MarvinJ. The example below demonstrates how to resize and crop an image in js in the client side.
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var canvas3 = document.getElementById("canvas3");
image = new MarvinImage();
image.load("https://i.imgur.com/gaW8OeL.jpg", imageLoaded);
function imageLoaded(){
imageOut = image.clone()
image.draw(canvas1)
// Crop
Marvin.crop(image, imageOut, 50, 50, 100, 100);
imageOut.draw(canvas2);
// Scale
Marvin.scale(image, imageOut, 100);
imageOut.draw(canvas3);
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas><br/>
<canvas id="canvas3" width="200" height="200"></canvas>
There is an security issue that disables get pixeldata from another domain. But to only do basic transformations such as rotate/resize/cropping you can use the 2d-context api to draw the image in a canvas. See this article for how to use 2d-context api.
Related
I have a script that crops an image from the video stream.
let ctx = image.getContext("2d");
ctx.drawImage(results.image, croprect.x, croprect.y, croprectwidth, croprectheight, 0, 0, 300, 200);
In HTML
<div id="image-div">
<canvas id="image" width="300" height="200"></canvas>
</div>
Now I need to do some image processing manipulation with it. I do 'Save as' for the test but how to do it automatically?
I tried
const canvas = document.getElementById('image');
const dataURL = canvas.toDataURL();
console.log(dataURL);
In the console, it gives an URL but when I open it, it is just a blank (white) rectangle (correct size 300x200)
I want to save it to my local folder and to the backend later when the second step (image processing) of the script will work.
I have a canvas:
<canvas id="canvas" width="400" height="400"/>
that I want to be able to scale dynamically using javascript, so I want to use scale(). But this is not working:
document.getElementById("canvas").getContext('2d').scale(2, 2);
The canvas remains at 400x400, even though I want it to be 800x800.
Live demo at https://jsfiddle.net/c8sjpr37/3/ using vue. Why doesn't it work?
The scale command is an internal canvas command. It changes the scale at which things are drawn. For example:
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
<div id="app">
<canvas id="canvas" width="400" height="400"/>
</div>
This snippet displays a rectangle, and then another rectangle twice the size of the first one and twice the distance from the translation point, because all of the pixel values were doubled with the .scale() command. I don't think this is what you wanted.
There is a way to edit the height and width styling, though. Canvases are picky, so if you change one, the other will change to match the initial ratio, but you can do this with something like:
document.getElementById("canvas").style.height = "800px";
I am working on HTML5 canvas with image manipulation. In my canvas I have number of images. When I want to clip the images individually. But when I clip one image by creating a shape and use clip() function, it is working fine. But the problem arise when I try to clip another image using the same method. As the canvas stored the previous shape it will concatenate with the new one and clip the second image accordingly. I want destroy the previous shape. Please note that I can't use the clearRect() to clear the canvas as my previous clipped image is there.
Please ref the link :
Demo Problem
In the link drag the image into canvas predefined layer and drag the image around. You can clearly see that the image got clipped properly if it try to go out of the border.
Now drag another image into the canvas in a different box. Now you can see the clipping is not functioning properly.
Here what I have done in the script :
JS Script
Here the JSFiddle Link
JSFiddle Link
Can you help me to fix this issue?
It will be helpful if you find another way to clear the previous shape.
Thanks in advance.
I have fix the issue by own. The canvas doesn't provide the multiple image clip option. So if you want to clip multiple image in your canvas you have to use your own clip function. Just clear the area by clearRect() of the canvas outside your selection. Iterate this process for each image and you are done !
Solution Link :
Solution Demo
JS Script Link :
JS Script
Thanks.
The best solution I could find is to use a hidden canvas, and draw to that, then use the putImageData method onto your main canvas.
var c = document.getElementById("myCanvas");
var ctemp = document.getElementById("myCanvasTemp");
var ctx = c.getContext("2d");
var ctxTemp = ctemp.getContext("2d");
ctxTemp.fillStyle = "red";
ctxTemp.fillRect(10, 10, 50, 50);
ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(20, 20, 50, 50);
function copy() {
var imgData = ctxTemp.getImageData(10, 20, 50, 10);
ctx.putImageData(imgData, 10, 10);
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br /><br />
<br />
<button onclick="copy()">Copy</button>
I'm developing a web app. It generates signatures for a game, with information from its API.
I'll need to store the images with a script that gathers the information and turns it into an image.
Do you know a way to turn text + CSS into an image?
Yes this can be done, what you want to do is draw the text on a canvas, and then save the canvas. you do not need to have the canvas show, you can hide it like any other html element, just add it, draw the text on it, and save it.
Here is a link on a library that saves:
https://github.com/hongru/canvas2image
Some sample code drawing text on canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Your Text",10,50);
// save img
Canvas2Image.saveAsImage(c, 200, 100, 'png');
</script>
I'm a Flash developer, and I'm working on a JavaScript port of a game. In the Flash version, I use glow, blur and color matrix filters to manipulate the appearances of display objects. I would like to do the same with my JavaScript view. Some of these are embellishments, while others are used to carefully produce a desired result. Because this project's goals are to create an exact port, I'm wondering what options I have to apply filters to raw canvas data, to inline SVG tags or to straight up DOM elements.
I've considered Pixastic, but my collaborator insists on a GPL license for the time being, which means any tech I use must be GPL compatible. Pixastic uses the Mozilla Public License, so I can't use it. (Which is a huge bummer, let me tell you.)
I'll say it again concisely: how do I efficiently apply pixel filters to DOM elements, to canvas image data or to SVG tags with JavaScript?
Here's an example showing some svg filtering:
http://xn--dahlstrm-t4a.net/svg/filters/colormatrix/svgimagefiltering.xhtml
and the corresponding canvas version:
http://people.opera.com/patrickl/experiments/canvas/image-edit/
Here are some js libraries for canvas doing what I think you're looking for:
http://mezzoblue.github.com/PaintbrushJS/demo/
https://github.com/pnitsch/BitmapData.js
A number of svg filter examples can be found on http://svg-wow.org (CC0 licensed).
I have created a library (context-blender) for performing Photoshop-style blend effects between HTML Canvases. This isn't exactly what you need, as you want some convolution filters to run on the pixels other than the original, but the code path will be the same: getImageData(), munge the data, putImageData.
My library happens to be MIT License, so feel free to investigate there with no fear of issues.
Filter.js library for image processing (including many AS3 filter types, like convolution, colormatrix, displacement map etc..)
https://github.com/foo123/FILTER.js
PS i am the author
The best way to filter images in Javascript is through an image processing framework. Some pure Javascript options:
fabric.js
processing.js
MarvinJ
In the case of MarvinJ, use the following code to load your image:
var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);
I'll use the following input image to demonstrate some filters:
GrayScale:
Marvin.grayScale(image, imageOut);
Black and White:
Marvin.blackAndWhite(image, imageOut, 10);
Sepia:
Marvin.sepia(image, imageOut, 40);
Emboss:
Marvin.emboss(image, imageOut);
Edge Detection:
Marvin.prewitt(image, imageOut);
Blur:
Marvin.gaussianBlur(image, imageOut, 3);
Brightness and Contrast:
Marvin.brightnessAndContrast(image, imageOut, 70, 60);
Color Channel:
Marvin.colorChannel(image, imageOut, 0, 0, 110);
Runnable example of the previous filters:
var canvas1 = document.getElementById("canvas1");
var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);
function imageLoaded(){
var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
// GrayScale
Marvin.grayScale(image, imageOut);
imageOut.draw(canvas1);
// Black and White
Marvin.blackAndWhite(image, imageOut, 10);
imageOut.draw(canvas2);
// Sepia
Marvin.sepia(image, imageOut, 40);
imageOut.draw(canvas3);
// Emboss
Marvin.emboss(image, imageOut);
imageOut.draw(canvas4);
// Edge
imageOut.clear(0xFF000000);
Marvin.prewitt(image, imageOut);
imageOut.draw(canvas5);
// Gaussian Blur
Marvin.gaussianBlur(image, imageOut, 5);
imageOut.draw(canvas6);
// Brightness
Marvin.brightnessAndContrast(image, imageOut, 70, 60);
imageOut.draw(canvas7);
// Color Channel
Marvin.colorChannel(image, imageOut, 0, 0, 110);
imageOut.draw(canvas8);
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="192" height="120"></canvas>
<canvas id="canvas2" width="192" height="120"></canvas>
<canvas id="canvas3" width="192" height="120"></canvas>
<canvas id="canvas4" width="192" height="120"></canvas>
<canvas id="canvas5" width="192" height="120"></canvas>
<canvas id="canvas6" width="192" height="120"></canvas>
<canvas id="canvas7" width="192" height="120"></canvas>
<canvas id="canvas8" width="192" height="120"></canvas>