We Keep Coding

Rotating dynamic canvas image with javascript

I have the following code that allows the user to upload an image which gets put into a canvas, but once it has been drawn I want users to be able to rotate the image with the click of a button, but I don't know how to re-access the image object to be able to rotate the canvas. The code below is what works:
onFilePicked (e) {
const files = e.target.files;
for (let file of files) {
if(file !== undefined) {
let image = {
thumbnail: '/img/spinner.gif'
};
this.images.push(image);
this.loadImage(file, image);
}
}
},
loadImage(file, image) {
const fr = new FileReader();
fr.readAsDataURL(file);
fr.addEventListener('load', () => {
var img = new Image();
img.src = fr.result;
img.onload = () => {
image.thumbnail = this.resizeImage(img, 400, 300);
image.large = this.resizeImage(img, 1280, 960);
}
})
},
resizeImage(origImg, maxWidth, maxHeight) {
let scale = 1;
if (origImg.width > maxWidth) {
scale = maxWidth / origImg.width;
}
if (origImg.height > maxHeight) {
let scale2 = maxHeight / origImg.height;
if (scale2 < scale) scale = scale2;
}
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = origImg.width * scale;
canvas.height= origImg.height * scale;
ctx.drawImage(origImg, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL("image/jpeg");
},
And seen below is the function I built out to rotate the image- it works in that if I replace the code inside of the resizeImage function with the code below that the image is drawn in a way that is rotated correctly, but I don't know how to access the origImg object to be able to redraw the canvas in a separate function.
rotateImage(origImg, maxWidth, maxHeight){
let scale = 1;
if (origImg.width > maxWidth) {
scale = maxWidth / origImg.width;
}
if (origImg.height > maxHeight) {
let scale2 = maxHeight / origImg.height;
if (scale2 < scale) scale = scale2;
}
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = origImg.height * scale;
canvas.height= origImg.width * scale;
ctx.translate(canvas.width, 0);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(origImg, 0, 0, canvas.height, canvas.width);
return canvas.toDataURL("image/jpeg");
},
Running this function as-is triggers the following console error:
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
How do I get/reuse the origImg object from the resizeImage function so I can use it in the rotateImage function?

you can try with this code:
var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctx.drawImage(origImg,0,0); // Or at whatever offset you like
};
And apply your code insede onload function of img and finally transform img source to date URL
Try this code, based on one file picker, two buttons. The first one resize image and the second one rotete the image
function resizeImg()
{
var oPicker = document.getElementById('avatar');
var oImage = document.getElementById('imgOut');
var file = oPicker.files[0];
const fr = new FileReader();
fr.readAsDataURL(file);
fr.addEventListener('load', () => {
var img = new Image();
img.src = fr.result;
img.onload = () => {
oImage.thumbnail = this.resizeImage(img, 400, 300);
oImage.src = this.resizeImage(img, 1280, 960);
}
})
}
function rotateImg()
{
var imgOut = document.getElementById('imgOut');
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let scale = 1;
canvas.width = imgOut.height * scale;
canvas.height= imgOut.width * scale;
ctx.translate(canvas.width, 0);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(imgOut, 0, 0, canvas.height, canvas.width);
imgOut.src = canvas.toDataURL("image/jpeg");
}
function resizeImage(origImg, maxWidth, maxHeight) {
let scale = 1;
if (origImg.width > maxWidth) {
scale = maxWidth / origImg.width;
}
if (origImg.height > maxHeight) {
let scale2 = maxHeight / origImg.height;
if (scale2 < scale) scale = scale2;
}
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = origImg.width * scale;
canvas.height= origImg.height * scale;
ctx.drawImage(origImg, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL("image/jpeg");
}
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Image test</h1>
<img src="" id="imgOut" />
<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
<input type="button" id="resImg" onclick="resizeImg()" value="Resize" />
<input type="button" id="rotImg" onclick="rotateImg()" value="Rotate" />
</body>
</html>

As you have a part in onFilePicked() where you store something about the images:
let image = {
thumbnail: '/img/spinner.gif'
};
this.images.push(image);
and later update the same objects in loadImage() (well, an event handler in it) as
image.thumbnail = this.resizeImage(img, 400, 300);
image.large = this.resizeImage(img, 1280, 960);
It could be simply extended to
image.original = img;
image.thumbnail = this.resizeImage(img, 400, 300);
image.large = this.resizeImage(img, 1280, 960);
Starting from this point, the objects in your images array would have an original field, storing the original, non-resized variant of the image.

Write on a canvas with background-image

So I am trying to build a Meme-Creator. You already can upload the pics as the background-img from the canvas. Now I am trying to do the Meme font but it isnt really working. However it is creating a big gap in the picture. Thanks for your help and attention! :D
var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
function readImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function(e) {
var img = new Image();
img.addEventListener("load", function() {
ctx.clearRect(0, 0, width, height);
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
});
img.src = e.target.result;
};
FR.readAsDataURL(this.files[0]);
}
}
function Text() {
ctx.clearRect(0, 0, width, height);
var textT = document.getElementById("top-text").value;
var textB = document.getElementById("bottom-text").value;
ctx.font = "60px Impact";
ctx.lineWidth = 3;
ctx.strokeText(textT, 10, 65);
ctx.strokeText(textB, 10, 400);
}
document.getElementById("image-input").addEventListener("change", readImage, false);
<input type="file" id="image-input" accept="image/*">
<input type="text" id="top-text" oninput="Text()">
<input type="text" id="bottom-text" oninput="Text()">
<canvas style="position: absolute; width: 400px; top: 100px; left: 10px;" id="meme-canvas"></canvas>

I've made a few changes to your script. because you need to draw the image several times I've written a function that draws the image. The canvas is cleared every time one of the 2 text input changes it's value, and every time you have to redraw everything.
Also textT and textB can be declared only once. You don't need to declare them in the Text function.
I need to use the font size (60) more than once, so I've made a variable fontSize = 60
Since you don't know the size of your canvas ( depends on the size of the uploaded image ) you need to calculate the position for the bottom text textB = height - fontSize/2 where height is the height of the canvas: height = canvas.height = img.height;
I hope it's useful.
var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var width = (canvas.width = 400);
var height = (canvas.height = 400);
var fontSize = 60;
var img = new Image();
var textT = document.getElementById("top-text");
var textB = document.getElementById("bottom-text");
function readImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function(e) {
img.addEventListener("load", function() {
width = canvas.width = img.width;
height = canvas.height = img.height;
drawImage();
});
img.src = e.target.result;
};
FR.readAsDataURL(this.files[0]);
}
}
function drawImage() {
ctx.drawImage(img, 0, 0);
}
function Text() {
ctx.font = fontSize + "px Impact";
ctx.textAlign = "center";
ctx.lineWidth = 3;
ctx.clearRect(0, 0, width, height);
drawImage();
ctx.strokeText(textT.value, width / 2, 65);
ctx.strokeText(textB.value, width / 2, height - fontSize/2);
}
document
.getElementById("image-input")
.addEventListener("change", readImage, false);
textT.addEventListener("input", Text);
textB.addEventListener("input", Text);
canvas{position: absolute; left: 10px; top:60px;border:1px solid #d9d9d9;}
<input type="file" id="image-input" accept="image/*">
<input type="text" id="top-text" />
<input type="text" id="bottom-text" />
<canvas style="" id="meme-canvas"></canvas>

A few of the issues I encountered:
If you change the size of the canvas you should not use the variables, because those wont be correct, or you will need to keep track of them
If you do clearRect you have to be aware what are you clearing and re-draw it.
The font did not look too clear so I added a white shadow for better contrast
The bottom text needed to be relative to the canvas height
Here is the code:
var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
function readImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function(e) {
img.addEventListener("load", function() {
canvas.width = img.width;
canvas.height = img.height;
draw();
});
img.src = e.target.result;
};
FR.readAsDataURL(this.files[0]);
}
}
function draw() {
var textT = document.getElementById("top-text").value;
var textB = document.getElementById("bottom-text").value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "60px Impact";
ctx.shadowColor = "white"
ctx.shadowOffsetX = ctx.shadowOffsetY = 2
ctx.lineWidth = 3;
if (img) ctx.drawImage(img, 0, 0);
ctx.strokeText(textT, 10, 45);
ctx.strokeText(textB, 10, canvas.height -10);
}
document.getElementById("image-input")
.addEventListener("change", readImage, false);
<input type="file" id="image-input" accept="image/*"><br>
<input type="text" id="top-text" placeholder="Top text" oninput="draw()"><br>
<input type="text" id="bottom-text" placeholder="Bottom text" oninput="draw()"><br>
<canvas id="meme-canvas"></canvas>

Browser crashes when taking picture with camera

I've got a simple page that allows you to take a picture with your phone and then upload it to the server.
To achieve that, I'm using HTML5's input as file, so when I click (or tap on) Choose File two options are displayed:
Use the phone's camera (I'm using an iPhone with iOS8)
Select a picture from the library.
If I select the picture from the library everything works just fine, as for now I'm only displaying it on screen, but if I use the camera, after taking the picture the browser crashes. I haven't been able to debug because it never hits my breakpoints since the debugging session crashes as well.
Here's the code. Any help will be highly appreciated.
<!--Seg:openPage-->
<script>
function resizeImg(img, canvas, ctx){
var MAX_WIDTH = 500;
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.height;
alert(width + " " + height);
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
//var ctx = canvas.getContext("2d");
//var dataURL = canvas.toDataURL(img, 0.5);
//img.src = dataURL;
ctx.drawImage(img, 0, 0, width, height);
}
function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result;
var c = document.querySelector('canvas');
var ctx = c.getContext('2d');
var img = new Image();
img.src = dataURL;
//****img.onload = function() {
//c.width = 200; //img.width;
//c.height = 200; //img.height;
if (img.complete) {
resizeImg(img, c, ctx);
//ctx.drawImage(img, 0, 0);
} else {
img.onload = function () {
resizeImg(img, c, ctx);
//ctx.drawImage(img, 0, 0);
};
}
//ctx.drawImage(img, 0, 0);
//****};
//****img.src = dataURL;
};
reader.readAsDataURL(file);
}
function upload(file){
var encodedB64 = window.btoa(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend=function(){
if(file){
//reader.readAsDataURL(file);
console.log(reader);
//alert(reader.result);
$('.output').val(reader.result);
}
submit_form('f','GO');
}
}
$(document).ready(function(){
var input = document.querySelector('input[type=file]');
input.onchange = function () {
var file = input.files[0];
//upload(file);
drawOnCanvas(file);
//displayAsImage(file);
};
});
</script>
<style>
/**
#canvas-container {
width: 100%;
height: 100%;
}
#canvas-container #myCanvas{
width: 100%;
}**/
</style>
<div class="container" style="padding-top: 10px;">
<div id="page_content">
<form name="f" method="POST" action="#&PGM " class="sigPad">
<input type="hidden" name="output" class="output">
<!--Add file input-->
<p>Choose a picture from your device or capture one with your camera now:</p>
<input type="file" id="picManager" accept="image/*" capture="camera">
<!--Add canvas-->
<p>Photo:</p>
<div id="canvas-container">
<canvas id="myCanvas"></canvas>
</div>
<button type="submit" class="btn btn-primary">View</button>
</form>
</div>
</div>
<!--End:openPage-->

Converting canvas to image does not include images on the canvas

I want to convert a canvas to a png image and put it on a page. My problem is that if I have an image on my canvas, it does not get converted. This is my HTML:
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" type="text/css" href="./assets/css/general.css">
<script type="text/javascript" src="./codetests.js"></script>
</head>
<body>
<div class="wrapper" id="wrap1">
<img id="persphoto" src="./images/nouserimage.png" style="display:none;">
<input type="hidden" id="persname" value="Test Testinen">
<input type="hidden" id="adress" value="Testgatan 1">
<input type="hidden" id="postaddr" value="12345 Teststad">
<input type="hidden" id="homephone" value="0123456789">
<input type="hidden" id="cellphone" value="0712345678">
<canvas src="" id="canvasresult" width="296px" height="420px" />
<br>
</div>
<script type="text/javascript"> drawCanvas(); </script>
<script type="text/javascript"> convertCanvasToImage(canvasresult); </script>
</body>
</html>
My JavaScript is the following:
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
//return image;
document.getElementById("wrap1").appendChild(image);
}
function drawCanvas() {
var c = document.getElementById("canvasresult");
h=parseInt(document.getElementById("canvasresult").getAttribute("height"));
w=parseInt(document.getElementById("canvasresult").getAttribute("width"));
//get context
var ctx = c.getContext("2d");
//Fill the path
ctx.fillStyle = "#ffffff";
ctx.fillRect(0,0,w,h);
var img=document.getElementById("persphoto");
ih=parseInt(document.getElementById("persphoto").getAttribute("height"));
iw=parseInt(document.getElementById("persphoto").getAttribute("width"));
var maxw = 150;
var maxh = 150;
if (ih > iw) {
var newh = 150;
var neww = Math.round(150 * (iw / ih));
} else if (ih < iw) {
var newh = Math.round(150 * (ih / iw));
var neww = 150;
} else {
var newh = 150;
var neww = 150;
}
var newx = Math.round((296 - neww) / 2);
var newy = 60 + Math.round((150 - newh) / 2);
img.onload = function() {
ctx.drawImage(img,newx,newy,neww,newh);
};
ctx.fillStyle = "#000000";
ctx.font = '10pt Verdana';
ctx.textAlign = 'center';
ctx.fillText(document.getElementById("persname").value, w/2, h*0.65);
ctx.fillText(document.getElementById("adress").value, w/2, h*0.69);
ctx.fillText(document.getElementById("postaddr").value, w/2, h*0.73);
ctx.fillText(document.getElementById("homephone").value, w/2, h*0.77);
ctx.fillText(document.getElementById("cellphone").value, w/2, h*0.81);
var canvasData = c.toDataURL("image/png");
/*
document.getElementById("canvasdata").value = canvasData;
document.getElementById("hidepersphoto").value = document.getElementById("persphoto").value;
document.getElementById("hidepersname").value = document.getElementById("persname").value;
document.getElementById("hideadress").value = document.getElementById("adress").value;
document.getElementById("hidepostaddr").value = document.getElementById("postaddr").value;
document.getElementById("hidehomephone").value = document.getElementById("homephone").value;
document.getElementById("hidecellphone").value = document.getElementById("cellphone").value;
*/
}
My problem is as I said that when I call convertCanvasToImage any images currently on the canvas doesn't get converted. The result is:
Can anyone spot where the problem is?

Few Changes:
pass the string literal "canvasresult" of canvasId rather than a variable.
<script type="text/javascript"> convertCanvasToImage("canvasresult"); </script>
Get the canvas object based on the Id:
// Converts canvas to an image
function convertCanvasToImage(canvasId) {
var image = new Image();
var canvas=document.getElementById(canvasId);
image.src = canvas.toDataURL("image/png");
//return image;
document.getElementById("wrap1").appendChild(image);
}

javascript: upload image file and draw it into a canvas

I work at a web application for painting images. I use a CANVAS element and JavaScript to draw on it, but I have a problem: how can I load an image from the PC of the user and draw it on the canvas? I don't want to save it on the server, only on the webpage.
Here is a shortened version of the code:
HTML:
Open file: <input type="file" id="fileUpload" accept="image/*" /><br />
<canvas id="canvas" onmousemove="keepLine()" onmouseup="drawLine()" onmousedown="startLine()" width="900" height="600" style="background-color:#ffffff;cursor:default;">
Please open this website on a browser with javascript and html5 support.
</canvas>
JavaScript:
var x = 0;
var y = 0;
var clicked = false;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineCap = "round";
canvas.addEventListener('mousemove', function(e) { getMousePos(canvas, e); }, false);
takePicture.onchange = function (event) {
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
processImage(file);
}
};
function processImage(file) {
var reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
context.drawImage(img, 100,100)
}
img.src = e.target.result;
}
}
// functions for drawing (works perfectly well)
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
x = evt.clientX - rect.left;
y = evt.clientY - rect.top;
}
function startLine() {
context.moveTo(x,y);
context.beginPath();
clicked = true;
}
function keepLine() {
if(clicked) {
context.lineTo(x,y);
context.stroke();
context.moveTo(x,y);
}
}
function drawLine() {
context.lineTo(x,y);
context.stroke();
clicked = false;
}
There's no copyright

const EL = (sel) => document.querySelector(sel);
const ctx = EL("#canvas").getContext("2d");
function readImage() {
if (!this.files || !this.files[0]) return;
const FR = new FileReader();
FR.addEventListener("load", (evt) => {
const img = new Image();
img.addEventListener("load", () => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0);
});
img.src = evt.target.result;
});
FR.readAsDataURL(this.files[0]);
}
EL("#fileUpload").addEventListener("change", readImage);
canvas {display: block;}
<input type='file' id="fileUpload" />
<canvas id="canvas" width="300" height="200"></canvas>

<html>
<head>
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('load', function() {
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
c.width = img.width;
c.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
});//]]>
</script>
</head>
<body>
<div style="background:#990; width:100%; padding:20px; ">
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
</div>
<canvas id="myCanvas" ></canvas>
</body>
</html>

Here is a much simpler method, which doesn't use inefficient data urls:
var canvas = document.getElementById('canvas')
var input = document.getElementById('input')
var c2d = canvas.getContext('2d')
input.onchange=function() {
var img = new Image()
img.onload = function() {
canvas.width = this.width
canvas.height = this.height
c2d.drawImage(this, 0, 0)
URL.revokeObjectURL(this.src)
}
img.src = URL.createObjectURL(this.files[0])
}
<input type=file id=input> <br>
<canvas id=canvas></canvas>