How can I return the canvas on this function as webp image?
function capture(video) {
if(scaleFactor == null){
scaleFactor = 1;
}
//var w = video.videoWidth * scaleFactor;
//var h = video.videoHeight * scaleFactor;
var w = 700;
var h = 400;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
var uniq = 'img_' + (new Date()).getTime();
canvas.setAttribute('id', uniq);
return canvas ;
}
Canvas has a method known as .toDataURL(type, encoderOptions).
I this case the following snippet should suffice
canvas.toDataURL('image/webp');
This will give you a data url which is a base64 encoding of the image and will look something like
data:image/webp;base64,UklGRqgCAABXRUJQVlA4WAoAAAAwAAAAxwAAYwAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgPAAAAAQcQEREAUKT//yWi/6lwAFZQOCBSAAAA8AcAnQEqyABkAD5tNplJpCMioSBoAIANiWlu4XXwADuh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJiHVUmyYh1VJsmIdVSbJhYAAP7/wbAAAAAAAA==
More information for this can be found on https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Related
I have an ImageData object but Tesseract.js only takes blob objects. How can I convert the ImageData to a blob as performantly as possible?
Referring here, the code should look like -
const ImageDataToBlob = function(imageData){
let w = imageData.width;
let h = imageData.height;
let canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
ctx.putImageData(imageData, 0, 0); // synchronous
return new Promise((resolve) => {
canvas.toBlob(resolve); // implied image/png format
});
}
Tesseract.js also takes some other types - https://github.com/naptha/tesseract.js/blob/master/docs/image-format.md - and I have found some code on the internet to convert:
function imgDataToImage(imagedata) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = imagedata.width;
canvas.height = imagedata.height;
ctx.putImageData(imagedata, 0, 0);
var image = new Image();
image.src = canvas.toDataURL();
return image;
}
I use getImageData from a canvas and display it on another canvas using putImageData. But it doesn't cover the entire canvas.It displays the picture in its original size.Is there a way to make the cropped picture cover the whole canvas.Thank you in advance.Both canvases are 300 by 300 in size.
var c = document.getElementById("area_c");
var c2 = document.getElementById("area_c2");
var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");
var imgData = ctx.getImageData(tx,new_ty ,x, new_y);
ctx2.putImageData(imgData, 0, 0);
In this snippet you can see how to scale another canvas with css (I used a string instead of an image to avoid CORS)
I also added a class if you want to use nearest-neighbor or pixelated
var c = document.getElementById("area_c");
var c2 = document.getElementById("area_c2");
var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");
var w = 150;
var h = 70;
c.width = w;
c.height = h;
ctx.font = "50px Arial";
ctx.fillText('Image',0,50);
var x = 5;
var y = 15;
var cw = 60;
var ch = 35;
c2.width = cw;
c2.height = ch;
var scale = 2;
c2.style.width = scale*cw+'px';
c2.style.height = scale*ch+'px';
var imgData = ctx.getImageData(x,y,cw,ch);
ctx2.putImageData(imgData, 0, 0);
document.querySelector('input[name=pixelate]').addEventListener('change',()=>{c2.classList.toggle('pixelate')});
canvas {
border: 1px solid #333;
}
.pixelate {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
<canvas id="area_c"></canvas>
<canvas id="area_c2"></canvas>
<input name="pixelate" type="checkbox"><label for="pixelate">Pixelate</label>
I need to stretch my image to the top and to the bottom in canvas.
How can I do this?
Here's the codepen
HTML
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
</canvas>
JS
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image;
img.src = "http://www.w3schools.com/tags/img_the_scream.jpg"
ctx.drawImage(img, 10, 10);
}
drawImage allows you to pass the width and height as third and fourth parameter.
So your last line should be ctx.drawImage(img, 0, 0,c.width, c.height); in order to fill the entire canvas.
If you just want an image to stretch to fill in the height you can do something like this jsFiddle : https://jsfiddle.net/CanvasCode/92ekrbnz/
javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image;
ctx.fillStyle = "#000";
ctx.fillRect(0,0,c.width,c.height);
img.src = "http://www.w3schools.com/tags/img_the_scream.jpg"
img.onload = function () {
ctx.drawImage(img, (c.width / 2) - (img.width / 2), 0, img.width, c.height);
}
However the link you provided basically just zooms into the image.
So you can do something like this jsFiddle : https://jsfiddle.net/CanvasCode/92ekrbnz/2/
javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image;
var zoom = 1.0;
img.src = "http://www.w3schools.com/tags/img_the_scream.jpg"
setInterval(function () {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, c.width, c.height);
ctx.drawImage(img, (c.width / 2) - ((img.width * zoom) / 2), (c.height / 2) - ((img.height * zoom) / 2),
img.width * zoom,
img.height * zoom);
}, 1);
document.getElementById("zoomIn").onclick = function () {
zoom += 0.1;
};
document.getElementById("zoomOut").onclick = function () {
if (zoom > 0.1) {
zoom -= 0.1;
}
};
Here is a more detailed answer of how to fill or fit a canvas while also keeping the image aspect.
Fill canvas
I need to extract original image-size canvas, but canvas must be always the same width and height, and if image aspect ration is different, it must be centered in canvas. What i mean i will explain by schema:
gray - all canvas area, over it (inner) - image
here you could preview it:
http://plnkr.co/edit/IBE35kJqNM3tSI8J3BqL?p=preview
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var img = new Image();
img.onload = start;
img.setAttribute('crossOrigin', 'anonymous');
img.src = "https://dl.dropboxusercontent.com/u/59666091/Audi-RS7-Sportback-1.jpg";
function start() {
var MAX_WIDTH = 400;
var MAX_HEIGHT = 310;
var iw = img.width;
var ih = img.height;
var scale = Math.min((MAX_WIDTH / iw), (MAX_HEIGHT / ih));
var sw = iw * scale;
var sh = ih * scale;
ctx.drawImage(img,
0, 0, iw, ih, (canvas.width - sw) / 2, (canvas.height - sh) / 2, iw * scale, ih * scale
);
console.log(canvas.toDataURL('image/jpeg', 100));
}
});
and all is ok, except one thing: when i execute canvas.toDataURL('image/jpeg', 100) i get only 400*310px image, but i need originial-size (much bigger then 400*310px) canvas-based data image, with background borders (as gray on schema etc).
is it real to do? and how, without loosing any current functionality?
You need change canvas width,height and drawing on the canvas max width and height
http://plnkr.co/edit/hycPgkjbT5YCzZPN3Rrm?p=preview
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var img = new Image();
img.onload = start;
img.setAttribute('crossOrigin', 'anonymous');
img.src = "https://dl.dropboxusercontent.com/u/59666091/Audi-RS7-Sportback-1.jpg";
function start() {
var MAX_WIDTH = img.width;
var MAX_HEIGHT = img.height;
var iw = img.width;
var ih = img.height;
$('#canvas').attr('width', img.width);
$('#canvas').attr('height', img.height);
var scale = Math.min((MAX_WIDTH / iw), (MAX_HEIGHT / ih));
var sw = iw * scale;
var sh = ih * scale;
ctx.drawImage(img,
0, 0, iw, ih, (canvas.width - sw) / 2, (canvas.height - sh) / 2, iw * scale, ih * scale
);
console.log(canvas.toDataURL('image/jpeg', 100));
}
});
I'm using the function below to resize and image using canvas
var img = new Image();
img.src = reader.result;
img.onload = function() {
var max_width = 800;
var max_height = 800;
var tempW = img.width;
var tempH = img.height;
var aspect_ratio = 1;
if (tempW > tempH) {
if (tempH > max_height){
var aspect_ratio = tempH / max_height
}
} else {
if (tempW > max_width){
var aspect_ratio = tempW / max_width
}
}
tempH = tempH / aspect_ratio;
tempW = tempW / aspect_ratio;
var canvas = document.createElement('canvas')
canvas.id = "uploadedcanvas";
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,tempW,tempH);
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");
createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas)
}
This is able to resize an image from taken from file reader. I would like to create a second image in the same canvas using the dataURL as the image source but this it does not seem to work this is what I'm doing
function createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas){
var copy = document.createElement('canvas');
copy.width = max_width;
copy.height = max_height;
var copyctx = copy.getContext("2d");
var sx = (tempW - max_width) / 2
var sy = (tempH - max_height) /2
copyctx.fillStyle="#FFFFFF";
copyctx.fillRect(0,0,max_width,max_height);
var imgcopy = new Image();
imgcopy.src = dataURL;
imgcopy.onload = function() {
copyctx.drawImage(imgcopy, sx, sy, 800, 800,0, 0, 800, 800);
var dataURL_ = copy.toDataURL("image/jpeg");
}
However datURL_ appears to be empty. I'm not sure why this is the case. Ideally I would want to create a new image using the image that was just resized.
You can do the following two changes and it should work:
set imgcpy.src after onload.
Use copyctx.drawImage(this, ...) instead of imgcopy.
This way you are making sure decoding and setting of image is not completed before onload is called, and this will have a valid reference to the image being decoded.