Input File Upload img file + canvas html ?

[CodeDeveloperOM]

 Hello programmers (^_^)

In my work, I want a Browse button to insert an image in the browser
And save them in the form ? 

The image appears at a specified width and height

by canvashtml in animate cc 

[CodeDeveloperOM]

Any Help ?

[CodeDeveloperOM]

this.stop();
var root = this;

var imageLoader = document.getElementById("imageLoader");
this.imageLoader.addEventListener("change", handleImage.bind(this));
var canvas = document.getElementById("imageCanvas");

function handleImage(evt) {
// canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var fileinput = document.getElementById('ab'); // input file
var img = new Image();

fileinput.onchange = function (evt) {
var files = evt.target.files; // FileList object
var file = files[0];
if (file.type.match('image.*')) {
var reader = new FileReader();
// Read in the image file as a data URL.
this.reader.readAsDataURL(file);
reader.onload = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
this.img.src=evt.target.result;
this.img.onload = () => cxt.drawImage(img, 100, 100);
}
}

} else {
alert("not an image");
}
};
}

[CodeDeveloperOM]

Why is it not working ؟

https://drive.google.com/file/d/1moeCtkdc1O_YDdWk6kjjSFCPphO1LtZQ/view?usp=sharing

http://jsfiddle.net/influenztial/qy7h5/

[CodeDeveloperOM]

@kglad Do you know where the error is ?

[kglad]

the first problem i see is with imageLoader.  is it null?

[CodeDeveloperOM]

@kglad Exactly how do I solve the problem?

[kglad]

you can add an element by manually editing the html file, or by using js code.  to use js code:

var imageLoader = document.createElement('input');
fileSelector.setAttribute('type', 'file');

// using code to set the onchange listener function
//fileSelector.setAttribute('onchange', 'handleImage.bind(this)()');

[CodeDeveloperOM]

this.upload_button.addEventListener("click", fl_MouseClickHandler_3.bind(this));

function fl_MouseClickHandler_3() {
	var reader = new FileReader();
	reader.onload = function (event) {
		var dataUri = event.target.result,
			context = document.getElementById("mycanvas").getContext("2d"),
			img = new Image();

		img.onload = function () {
			context.drawImage(img, 100, 100);
		};
		img.src=dataUri;
		reader.readAsDataURL('file');
	}
}

Still not working?

[Nick Gioia]

Try to talk to JoãoCésar. He is a really good programmer.

 https://community.adobe.com/t5/user/viewprofilepage/user-id/17023019

[JoãoCésar]

Hi.

Here is an example based on the FLA you sent me:

https://drive.google.com/file/d/1pJbpzOYQh4UWQlgdzsl70c2ATcjMEjZ1/view?usp=sharing

JS code:

var root = this;
var inputFile;

root.main = function()
{
	root.stop();
	
	root.customBtn.addEventListener("click", function(e)
	{
		root.uploadImage({ input: inputFile, props: { type: "file", accept: "image/*" }, style: { display: "none" } }, // input
		root.libImage, // container
		function(e, container) // loadCallback
		{
			var bounds;
				
			if (container.bitmap)
				container.removeChild(container.bitmap);
			
			container.bitmap = new createjs.Bitmap(e.target.result);
								
			setTimeout(function()
			{
				container.addChild(container.bitmap);
				bounds = container.bitmap.getBounds();
						
				if (bounds.width > container.nominalBounds.width)
					container.bitmap.scaleX = container.bitmap.scaleY = bounds.width / container.nominalBounds.width;
				
				container.bitmap.x = -bounds.width * container.bitmap.scaleX * 0.5;
				container.bitmap.y = -bounds.height * container.bitmap.scaleY * 0.5;
			}, 0);
		});
	});
};

root.uploadImage = function(input, container, loadCallback)
{
	input.input = root.createElement("input", input.props, input.style);
	input.input.click();
	
	input.input.addEventListener("change", function(e)
	{
		if (e.currentTarget.files && e.currentTarget.files[0])
		{
			var reader = new FileReader();

			reader.onload = function(e)
			{
				loadCallback(e, container);
				root.removeElement(input.input);
			}
			
			reader.onerror = function(e)
			{
				root.removeElement(input.input);
				console.error("Error! Code: " + e.target.error.code);
			};

			reader.readAsDataURL(e.currentTarget.files[0]);
		}
		else
			root.removeElement(input.input);
	});
};

root.createElement = function(type, attributes, style, props)
{
	if (!props)
		props = {};
		
	var element = document.createElement(type);
	var parentNode = props.parentNode ? props.parentNode : document.body;
	var key;

	parentNode.appendChild(element);

	if (attributes)
	{
		for (key in attributes)
			element[key] = attributes[key];
	}

	if (style)
	{
		for (key in style)
			element.style[key] = style[key];
	}

	return element;
};

root.removeElement = function(element)
{	
	if (element)
		element.remove();
}

root.main();

I hope it helps.

Regards,

JC

[CodeDeveloperOM]

many thanks (^_^)
But the code works in chrome .
It does not work in Microsoft Edge .

[JoãoCésar]

Edge and IE always need special attention...

My idea here was just to provide a template to help you get started.

It is very likely that you will have to make several adaptations so that everything runs according to the needs of your project.

[CodeDeveloperOM]

I am using it for students 

[CodeDeveloperOM]

@JoãoCésar 

[CodeDeveloperOM]

if (container.bitmap)
container.removeChild(container.bitmap);

container.bitmap = new createjs.Bitmap(e.target.result);

setTimeout(function () {
container.addChild(container.bitmap);
bounds = container.bitmap.getBounds();

if (bounds.width > container.nominalBounds.width)
//container.bitmap.scaleX = container.bitmap.scaleY = bounds.width / container.nominalBounds.width;
container.bitmap.x = this.libImage.x;
container.bitmap.y = this.libImage.y;
//container.bitmap.width = this.libImage.width;
//container.bitmap.height = this.libImage.height;
container.bitmap.width = 263;
container.bitmap.height = 217;
//container.bitmap.width = -bounds.width * container.bitmap.scaleX * 0.5;
//container.bitmap.height = -bounds.height * container.bitmap.scaleY * 0.5;
}, 0);

[CodeDeveloperOM]

@JoãoCésar   

The method worked
In a browser IE
By substituting a marker
<canvas>
With a mark
<! DOCTYPE html>

[CodeDeveloperOM]

Doesn't work in other browsers?

[CodeDeveloperOM]

@JoãoCésar  @kglad Can you solve the code problem in the browser?
I tried and did not adjust with me?