Input File Upload img file + canvas html ?

Contributor ,
Apr 04, 2021 Apr 04, 2021

Copy link to clipboard

Copied

2021-04-04_21-11-57.jpg

 Hello programmers (^_^)

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

2021-04-04_21-15-23.jpg

The image appears at a specified width and height

by canvashtml in animate cc 

 

 

TOPICS
Code, How to

Views

602

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

Any Help ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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");
}
};
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 08, 2021 Apr 08, 2021

Copy link to clipboard

Copied

 

@kglad Do you know where the error is ?

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 08, 2021 Apr 08, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 09, 2021 Apr 09, 2021

Copy link to clipboard

Copied

@kglad Exactly how do I solve the problem?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 11, 2021 Apr 11, 2021

Copy link to clipboard

Copied

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)()');

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

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

 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

I am using it for students 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

 

 

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);

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 30, 2021 Apr 30, 2021

Copy link to clipboard

Copied

LATEST

@JoãoCésar   

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

Doesn't work in other browsers?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines