This should be a simple Air App. I am using Dreamweaver CS5.5 and creating an Air App. I cannot get the Canvas to load an image on function. I can get the image to load onLoad. The objective is to get an image to draw on canvas then resize and toDataURL to an img tag. What am I doing wrong? Here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function getImage(url){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src=url;
img.onload = function(){
context.drawImage(img, 0,0,width,height);
var dataurl = canvas.toDataURL();
document.getElementById('image').src = dataurl;
};
var MAX_WIDTH = 140;
var MAX_HEIGHT = 200;
var width = img.width;
var height = img.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;
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<img id="image" src="" />
<button onClick="javascript:getImage('https://www.google.com/images/srpr/logo3w.png');">Get Image</button>
</body>
</html>
I think the that line is giving you problems:
<button onClick="javascript:getImage('https://www.google.com/images/srpr/logo3w.png');">Get Image</button>
The code defined in a link using the javascript: URL scheme is ignored in the application sandbox. No unsafe JavaScript error is generated.
Related
I've been struggled with this problem for couple hours. I want to resize an image from an input tag and then upload it to the server. Here is my attempt.
My input element:
<Input type="file" name="file" onChange={this.handleLoadAvatar} />
My handleLoadAvatar function:
handleLoadAvatar(e) {
var file = e.target.files[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
}
reader.readAsDataURL(file);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;
var width = img.width; // GET STUCK HERE
var height = img.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");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
this.setState({previewSrc: dataurl});
}
I'm using ReactJS for my project. I got stuck at the line with the comment above where I can't get the image's width. I tried this solution at HTML5 Pre-resize images before uploading but this seems not to work for me. Can anybody point out what's wrong with my code and how to fix it? Thanks a bunch!
The problem is that you aren't waiting for the image to load before accessing its width and height.
As you are waiting for the reader, you should do the same for the img:
handleLoadAvatar(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = (e) => {
var img = document.createElement("img");
img.onload = () => {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.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");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
this.setState({previewSrc: dataurl});
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
I am currently trying to resize images before the upload and to achieve this I am using JS/Jquery, has to be client side. On my server I simply deny all requests which are bigger then 30MB.
I am using this code:
$( "input[type='file']" ).change(function() {
console.log("function works");
// from an input element
var filesToUpload = this.files;
console.log(filesToUpload);
var img = document.createElement("img");
img.src = window.URL.createObjectURL(this.files[0]);
console.log("image: ", img);
console.log("the image is: ", img.width);
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.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 = $("#uploading_canvas").get(0);;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas[0].toDataURL("image/png");
//var file = canvas.mozGetAsFile("foo.png");
});
The first console.log output shows that the image is there, but somehow it has no width or height. Uploading an image with this code doesnt change anything atm.
Here are the console log outputs:
DataToUrl is undefined because the image is missing?
As #ymz explained in the comments the image needs time to load, so wrapping the image related code into an additional onload function solved the issue.
The solution looks like this:
$( img ).load(function() {
canvas = $("#uploading_canvas").get(0);
var MAX_WIDTH = 600;
var MAX_HEIGHT = 450;
var width = img.width;
var height = img.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");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
});
EDIT: I dont want to show the image on the client, the purpose is to shrink the image and scale...
Im having some trouble resizing an image which is selected using a file input in a form before it must be uploaded to the server.
I have the following code monitoring my file input:
// monitor file inputs and trigger event
$(document).on('change', '.btn-file :file', function() {
var F = this.files;
if(!isImage( F[0] ))
{
alert("Not an image file");
}
var fileurl = resizeImage(F[0]);
console.log(fileurl);
var input = $(this),label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
This function will call resizeImage which looks like this:
function resizeImage(file)
{
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
console.log(img.width);
var canvas = document.createElement('canvas');
var width = img.width;
var height = img.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");
ctx.drawImage(img, 0, 0, width, height);
console.log(ctx);
var dataurl = canvas.toDataURL("image/png");
return dataurl;
}
Problem is, that my console log tells me that the return value from my resize function is "data:,". I then started to console.log my way out of it, to narrow down where the problem is hiding. In my resizeImage function i logged the WIDTH of my img element which gave me a width of 0 which should not be correct ? .. I can't figure out what i have done wrong..
If your target browser supports the file input attribute, then you can use URL.createObjectURL to create an image source that you can manipulate with the canvas element.
Given a maximum desired size of maxW x maxH you can calculate the scaling factor that will resize the image while maintaining the original aspect ratio like this:
var scale=Math.min((maxW/img.width),(maxH/img.height));
Here's example code and a Demo.
Note that the demo does draw the image to the canvas, but you could just as easily substitute an in-memory canvas with document.createElement('canvas').
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// limit the image to 150x100 maximum size
var maxW=150;
var maxH=100;
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var img = new Image;
img.onload = function() {
var iw=img.width;
var ih=img.height;
var scale=Math.min((maxW/iw),(maxH/ih));
var iwScaled=iw*scale;
var ihScaled=ih*scale;
canvas.width=iwScaled;
canvas.height=ihScaled;
ctx.drawImage(img,0,0,iwScaled,ihScaled);
alert(canvas.toDataURL());
}
img.src = URL.createObjectURL(e.target.files[0]);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<input type="file" id="input"/>
<br>
<canvas id="canvas" width=300 height=300></canvas>
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-->
I'm trying to make an image upload from where, when user browse an image from disk, the scaled image shows as a preview on the canvas. to get the scaled image from the canvas the dataurl image only shows half image. when I try to right click and view image from the canvas, i get the complete image url.
here's my code.
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#fileupload').change(function(){
var MAX_WIDTH = 180;
var MAX_HEIGHT = 120;
var file = this.files[0];
var canvas = document.getElementById('canvas');
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
}
img.onload = function(){
var width = img.width;
var height = img.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");
ctx.scale(1,1);
ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL("image/png");
alert(dataurl); //this path shows imcomplete image.
}
reader.readAsDataURL(file);
</script>
</head>
<body>
<input id="fileupload" type="file">
<canvas width="180" height="120" id="canvas"></canvas>
</body>
</html>