• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Input File Upload img file + canvas html ?

Engaged ,
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

3.0K

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
Engaged ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

Any Help ?

Votes

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

Votes

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
Engaged ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

Votes

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
Engaged ,
Apr 08, 2021 Apr 08, 2021

Copy link to clipboard

Copied

 

@kglad Do you know where the error is ?

 

Votes

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
Community Expert ,
Apr 08, 2021 Apr 08, 2021

Copy link to clipboard

Copied

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

Votes

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
Engaged ,
Apr 09, 2021 Apr 09, 2021

Copy link to clipboard

Copied

@kglad Exactly how do I solve the problem?

Votes

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

Votes

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
Engaged ,
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?

Votes

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
Community Expert ,
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

Votes

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
Community Expert ,
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

Votes

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
Engaged ,
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 .

Votes

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
Community Expert ,
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.

Votes

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
Engaged ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

I am using it for students 

Votes

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
Engaged ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

Votes

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

 

 

Votes

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
Engaged ,
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>

 

Votes

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
Engaged ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

Doesn't work in other browsers?

Votes

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
Engaged ,
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?

Votes

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