I am drawing a full-window graph with the HTML5 canvas feature, and what I want to do is to define a small square of region inside this canvas, and snapshot that the part of region into certain format, like png, jpg or a base64 text.
First, create a new canvas in background with the width and height of the image you want to take:
var bgCanvas = document.createElement('canvas');
bgCanvas.width = 200;
bgCanvas.height = 150;
Then copy a part of the original canvas to the background canvas using context.drawImage. This example copies the 200x150 section starting at 400:500.
var bgContext = bgCanvas.getContext('2d');
bgContext.drawImage(mainCanvas, // source
400, 500, // source coordinates
200, 150, // source dimension
0, 0, // target coordinates
200, 150); // target dimensions
Now you just have to get the base64-encoded version of the bgCanvas as already explained in question "Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)".
Related
We are using a canvas to draw an image, and require that the image is smoothed.
so we use context.imageSmoothingEnabled in the 2d Canvas context.
We notice that if we use a jpg and smoothing is true, then the image fails to scale correctly on some machines (mainly windows 64bit).
In addition, if smoothingQuality is set to 'low' (rather than medium or high) then it works, but of course, who wants low.
If you modify the code to point to a PNG file, it seems to work ok.
Here is the JS Code
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.imageSmoothingQuality = "medium";
// set to true and the image fails to scale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0, 50, 50);
}
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
body {
background: #CEF;
}
<canvas id="c" width="800" height="600"></canvas>
Thanks in advance.
I have tried it on a Win10 64bit, Win10 32Bit (64bitCPU) and Win10 32bit on Chrome Beta, & Canary
Can not repeat problems you mention.
The image format (jpeg,png) will not effect the result of any of the smoothing or quality settings (apart from source image quality).
What can make a difference, especially at small scales is the ratio of the scaled down image to the original. Ratios like 1/2 1/4 1/8th will produce far better results than 1/3 2/9 3/19th. When comparing images of different sizes you should compare at same scale ratio rather than same size (if original have different sizes)
Below I used your code and the image you linked to to draw the image at the same size you had. Along the top from left to right is smoothing true from quality high on left to low on right.
The second row is same but smoothing turned off.
Below that is the same but zoomed via copy of canvas and no smoothing to show more details of the differences the setting make (if any).
If as your question outlines this was reproducible it would be a major issue for chrome and would be quickly fixed. I would say it is something very specific, maybe all the graphics cards are the same type and there is a driver issue, or images are cached and some old bad version is appearing.
If you want more help the best you could do is provide some screen shots of the problems, showing the problem and the desired result. That way we can at least narrow it down somewhat.
var ctx = c.getContext('2d');
var img = new Image;
img.src = "http://i.imgur.com/gwlPu.jpg";
img.onload = function () {
ctx.imageSmoothingQuality = "high";
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0,50,50);
ctx.imageSmoothingQuality = "medium";
ctx.drawImage(img, 60, 0,50,50);
ctx.imageSmoothingQuality = "low";
ctx.drawImage(img, 120, 0,50,50);
ctx.imageSmoothingQuality = "high";
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 60,50,50);
ctx.imageSmoothingQuality = "medium";
ctx.drawImage(img, 60, 60,50,50);
ctx.imageSmoothingQuality = "low";
ctx.drawImage(img, 120, 60,50,50);
ctx.imageSmoothingQuality = "low"; // turn off all filtering
ctx.imageSmoothingEnabled = false;
ctx.drawImage(c,0,0,170,110,0,120,680,440)
}
body {
background: #CEF;
}
<canvas id="c" width="800" height="600"></canvas>
Following content edited in by OP user2739963
Here is a screen shot of this not working on a machine (We have many of these).
I'm trying to use a canvas image as background here: http://www.cphrecmedia.dk/musikdk/stage/prelisten.php
The code is as below:
window.onload=function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
stackBoxBlurImage('coverbgblur', 'canvas', 19, false, 2);
}
Beside the layout stuff that needs to be fixed, I need to darken the image a little bit, so the text will always be visible, also if I use a white album-cover. Can I somehow in the code above add a line or 2 that will darken the image? I know I can use CSS3, but its seems unsmart to create an extra layer of processing instead of doing it right the first time.
I'm quite new with canvas, so every kind of help is hugely appreciated!
You can make the canvas appear darker by drawing a semi-transparent dark rectangle over the image when after you draw the image
context.fillStyle = "rgba(0, 0, 0, 0.4)";
context.fillRect(0, 0, 700, 500);
Here is an example jsFiddle
You may also be able to use context.globalAlpha or context.globalCompositeOperation = "lighter"; as described in this SO post
Hi i am building a windows store app with html5 and javascript in my app i am trying to implement an eraser tool but this is problematic because if the user moves an image or another layer to where they've previously erased, they see the white drawing where they erased.
i have been trying to do the eraser tool from different ways for example i have changed the default globalCompositeOperation to "destination-out" like this code
//Here is the error.
if (clickTool[j] == "eraser") {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(255,0,0,0.5);';
ctx.strokeStyle = 'rgba(255,0,0,0.5);';
}
else {
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = clickColor[j];
}
but unfortunately it doesn´t work for me. i have uploaded all my code to this link:
My code
Please i would like to somebody could help me.
Thanks and i'm sorry for my speech , i'm mexican.
Use multiple layers. Have one canvas for the background image and another for the drawing; that why you never erase any of the background image.
If you need to, you can have multiple layers as they don't generally impact performance.
And of course if you can combine layers, say the last drawn squiggle to the background layer, if you deem a drawing to be "permanent".
Maintain a array of mid points. Use the globalCompositeOperation as 'destination-out' first and 'source-over' later to make a transparent eraser trail .
Following is the code that you need to use with a mouse move function
var handleMouseMove = function (event) {
midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
if(curTool.type=="eraser"){
var tempcanvas = document.getElementById('drawcanvas');
var tempctx=tempcanvas.getContext("2d");
tempctx.beginPath();
tempctx.globalCompositeOperation = "destination-out";
tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);
tempctx.fill();
tempctx.closePath();
tempctx.globalCompositeOperation = "source-over";
drawingCanvas.graphics.clear();
// keep updating the array for points
arrMidPtx.push(midPt.x);
arrMidPty.push(midPt.y);
stage.addChild(drawingCanvas);
stage.update();
}
};
I use this code to make a eraser that behaves like pen and fills up transparent color instead of white
What is best practice? Should I make a separate canvas tag for each image in html5, or is it just as functional to put multiple images in one canvas, and how would I do that.
My Code so far:
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var cat = new Image();
cat.src = "images/cartoonPaul01.jpg";
cat.onload = function() {
context.drawImage(cat, 0, 0, 169, 207);
};
You can do this dynamically, if you're so inclined. muro from deviant art uses a few base canvases – temp, buffer, and background. Then you dynamically create and delete layers using a control on the side. It depends largely on what you want to do.
If you are just printing to the canvas, and you don't need to necessarily alter the images in a way that needs dynamism, you can draw them all to one canvas. If you need layering, use it.
Dynamic canvas and context creation:
// This is not best practice, just an example using globals.
var layers = [];
var lyrCtx = [];
createLayer = function() {
// Create the canvas.
layers.push(document.createElement('canvas'));
layers[layers.length - 1].setAttribute('id', 'layer'+layers.length-1);
// Create the context. Provided you do it in order, lyrCtx[i] should correlate to layers[i]
lyrCtx.push(layers[layers.length - 1].getContext("2d"));
// Handle context settings here.
}
You should get the balance. I usually use 4-6 canvas layers in my app, and draw logical part on them.
I'm looking for an elegant way to generate a thumbnail for use with the FileAPI. Currently I get a DataURL representing an image. Problem is, if the image is very large, than moving it around and rerendering it becomes CPU intensive. I can see 2 options to get around this.
Generate a thumbnail on the client
Generate a thumbnail on the server, send the thumbnail back to the client (AJAX).
With HTML5 we have a canvas element? Does anyone know how to use it to generate thumbnails from pictures? They don't have to be perfect -- sampling quality is acceptable. Is there a jQuery plugin that will do this for me? Are there any other way to speed up the clientside use of large images?
I'm using HTML5, and Firefox 3.6+: there is no need to support anything other than Firefox 3.6+, please don't provide suggestions for IE 6.0
Here’s what you can do:
function getThumbnail(original, scale) {
var canvas = document.createElement("canvas");
canvas.width = original.width * scale;
canvas.height = original.height * scale;
canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);
return canvas
}
Now, to create thumbnails, you simply do the equivalent of this:
var image = document.getElementsByTagName("img")[0];
var thumbnail = getThumbnail(image, 1/5);
document.body.appendChild(thumbnail);
Note: Remember to make sure that the image is loaded (using onload) before trying to make a thumbnail of it.
Okay, the way I can see this working is drawing the image to the canvas at a smaller size, then exporting the canvas. Say you want a 64px thumbnail:
var thumbSize = 64;
var canvas = document.getElementById("canvas");
canvas.width = thumbSize;
canvas.height = thumbSize;
var c = canvas.getContext("2d");
var img = new Image();
img.onload = function(e) {
c.drawImage(this, 0, 0, thumbSize, thumbSize);
document.getElementById("thumb").src = canvas.toDataURL("image/png");
};
img.src = fileDataURL;
With this code, an image element with the id "thumb" is used as the thumbnail element. fileDataURL is the data URL that you got from the file API.
More information on drawing images to the canvas: http://diveintohtml5.info/canvas.html#images
And on exporting canvas data: http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx