I have been trying to figure out how I could resize the canvas contents to get roughly a 100x100 thumbnail and upload it to the server. I would like to keep my existing canvas in its current size, because all these actions have to be invisible to the user.
I know I can get the contents in the current size of the canvas by using toDataURL, but how could I resize it and then upload to the server?
var image = canvas.toDataURL("image/png");
You can create canvas in your JS script (without appending it to DOM), then draw on it your content from working canvas (your image), resize it in context of your temp canvas ( Post about resizing in canvas ). And only then do canvas.toDataURL("image/png"); to get resized image. Then you send it as base64 string and save on your server as png file.
Thanks to Alexander Kremenets I managed to put together the code I needed. I used the Hermite resize from the question Alexander linked. Also combined code from other questions coming up with this:
var originalCanvas = document.getElementById("c");
// Create canvas for resizing
var resizeCanvas = document.createElement("canvas");
resizeCanvas.height = originalCanvas.height;
resizeCanvas.width = originalCanvas.width;
var resizeCtx = resizeCanvas.getContext('2d');
// Put original canvas contents to the resizing canvas
resizeCtx.drawImage(originalCanvas, 0, 0);
// Resize using Hermite resampling
resampleHermite(resizeCanvas, resizeCanvas.width, resizeCanvas.height, 150, 90);
// Use the resized image to do what you want
var image = resizeCanvas.toDataURL("image/png");
Related
Is there a way to detect when canvas content is loaded? What I'm trying is following. I need to print a page where in a widget is rendered a pdf document using the pdfjs library. Only the first pdf page have to be printed alongside with the content of the web page where the widget is placed. My approach was to get the canvas of the first pdf page which the pdfjs library created and put its content as source of an img element.
var content = canvas.toDataURL();
var img = document.createElement('img');
img.setAttribute('src', content);
widget.parentNode.insertBefore(img, widget);
Now if I use this as is, the image is created but is blank. If I put the code above inside setTimeout with a few seconds delay the image is rendered properly with the content of the first pdf page but this is not reliable for me. I've checked the content returned by canvas.toDataURL() in both cases and it appeared not equal so this was the reason for my conclusion that the content of the canvas was not loaded yet.
Any ideas for solution would be appreciated.
canvas will bind to the DOM like any other html tag. But your problem is image is not loading at very first time. So use onload method for loading images.
Refer HTML5 Canvas Load Image Data URL
EDIT :
drawImage() method draws an image or video onto the canvas. So use that method to draw the image on canvas.
Here is the updated code:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(this, 10, 10); // here this = image, 10 = width of the image, 10 = height of the image
};
imageObj.src = dataURL;
For more information see here
I'm drawing a image to a canvas, and when doing so the image gets downscaled to the canvas(which makes it lose quality) even though the image is the same size as the canvas, thats because the img does a good job scaling down the actual img that in reality has a bigger naturalheight and naturalwidth. I know there is possible ways to make this quality better, however i have no need of actually showing this canvas to the user/no need of downscaling. Therefore am i wondering if there is any way to drawImage that is bigger than the screen and hold it somewhere? Heard someone mention a box object or a camera object somewhere but couldn't really get use of that information only.
Question, is it possible to draw a canvas bigger than the screen? in that case how?
This is the code im working with atm
var image = document.getElementById('insertedImg');
var height = $("#insertedImg").height();
var width = $("#insertedImg").width();
var c=document.getElementById("canvass");
var ctx=c.getContext("2d");
c.height=height;
c.width=width;
ctx.drawImage(image,0,0,width,height);
Use an offscreen canvas, you just need to create a new canvas and set its height and width accordingly. Then you can append it to an element or export the image as a base64 string or whatever you need.
//canvas is not visible unless appended to a DOM element
var canvas = document.createElement('canvas');
canvas.width = $("#insertedImg").height();
canvas.height = $("#insertedImg").width();
var ctx = canvas.getContext('2d');
//do the drawing, etc.
ctx.drawImage(...);
//export the image
var img = canvas.toDataURL("image/png");
Task:
My task is to create a thumbnail generator using JavaScript without additional frameworks or server side. A user drops an image to a dropzone and a thumbnail is generated and displayed onto the screen. When you click on a thumbnail the full version of image should appear in the next tab.
Current solution:
I have used an invisible canvas element to draw the full and resized version of the image and I am saving them by using canvas.toDataURL() and attach this base64 encoding to the img and a tags.
Problem:
The problem I am facing is related to the file size of the image I can drop. Currently when I upload the image that exceeds 2 Megabytes the thumbnail is generated correctly but if I want to display the full size image Chrome or Firefox crash due to base64 length limit.
Question:
Is there any workaround to bypass base64 lenght limit?
Yes.
You should use HTMLCanvasElement.toBlob to create Blob object, and then URL.createObjectURL to create temporary URL that can be used to display image via or for downloading image.
Also take a look at MDN articles like Using object URLs to display images
window.URL = window.URL || window.webkitURL;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFFFFF";
ctx.font="12px Verdana";
ctx.fillStyle = "#000000";
ctx.fillText("jpeg with",0,10);
ctx.fillText("quality 20 used",0,25);
ctx.fillText("intentionally",0,40);
ctx.moveTo(0,50);
ctx.lineTo(100,100);
ctx.stroke();
canvas.toBlob(function(blob){
var img = document.createElement('img');
var url = URL.createObjectURL(blob);
img.src = url;
img.onload = function(){
URL.revokeObjectURL(url);
}
document.body.appendChild(img);
}, "image/jpeg", 0.20);
<p>may not work on stackoverflow, try jsfiddle in this case</p>
<canvas id="canvas" width="100" height="100"/>
Please note that since canvas.toBlob accepts callback, and calling window.open from callback (rather than click event) will cause window to be blocked (read more here and here).
To bypass this you can create a blob beforehand, so when click occurs you can display image instantly.
I'm dynamically drawing a floorplan through canvas which you can scroll through up/down left/right but I would like to save the whole image of the floorplan for other uses. I know I can scale the floorplan down and capture the image but I need it to be in a higher resolution than the actual screen I'm capturing it on.
I'm currently using FileSaver.js to save the canvas as a bitmap because it's super easy.
Is this possible?
It's hard to tell without more information, but you can create a larger canvas (of the size you need it to be) and let it hidden. Then when you want to capture, you re-draw everything into that canvas and save your picture from it instead of the one that is displayed.
So you don't need to save the canvas, but the image.
I don't know your FileSaver.js, but if it cannot save an image directly,
putting the image inside a new canvas is easy :
function getCanvasFromImage(img) {
var cv = document.createElement('canvas');
cv.width = img.width; cv.height = img.height;
cv.getContext('2d').putImage(img, 0, 0);
return cv;
}
Is there any way through any type of client side script to get an external image (ex: http://www.google.com/image.jpg) and resize it when the user copies the image so that the pasted image will be resized? And I can't get HTML5 canvas to work.
I'm working out of Dreamweaver CS5.5 and creating an Air App. The code works in live view but not when I preview the Air App. Here is the code that is not working:
function test(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
context.drawImage(img, 0,0);
};
img.src="image.jpg";
}
You can try drawing the image then doing img.src = canvas.toDataURL('image/png') prior to the user dragging. This will cause the canvas to output its data to the image tag. The canvas should be invisible, while the image is the visible element the user should drag.
To resize the image, specify the width and height in the drawImage.