I try this, but I don't succeed. Is there a posibility to save that object or their values and then use it , e.g. for a redraw?
Instead of saving the image data array (which is uncompressed), I would suggest using Canvas.toDataURL to get a base64-encoded PNG for the canvas, and saving that string.
Later, you can draw this data URL to your canvas.
Related
I'm trying to update an image in a material of a pre-loaded .js model - i want it to have the same properties, whereas only the image is changed.
Was trying to use this post as a reference, but in the .js model file, the map appears as the "mapAmbient" property. I was thinking of somehow using the THREE.ImageUtils.loadTexture() function, but couldn't find where exactly it should be placed.
Moreover, the texture should be loaded using an Image() object generated using another canvas. Any help would be appriciated
*Edit:
Wasn't able to find actual way to change that property in runtime, but was able to change the image using base64 encoding:
//img is base64 encoded image
var tex = new THREE.ImageUtils.loadTexture(img);
currentMesh.material.materials[1].map = tex;
I am studying HTML5. I want to create / draw some shapes in canvas and save it in MySQL database and restore it in the canvas itself.
I followed this tutorial
And saved the data in database. I got this in my database column
data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAEAUlEQVR4nO3dv48VVRgG4DcRtjEWJBQbOhortYQ%2FASOtyWpCBQkWFtQm1jTGnlBQEV2NCTWVfwCVNiRsZSwwuFRsRAJ7sbjBrLkz98cyO9%2Bc%2BDzJtJv3NPvmzHfO3AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOL7tJLMkr3ue2ZHneZL7NTEBmJLt9BfHps%2BbkjlM8jTJlRHXAcCIhiyPTUtmluQgyb0TXyUAg%2Bp7ZTXreMYumTc5bp7Y6gE4lr5S2N7gb9zPfB4yRtE8Pu5CARhW1z%2F7TcpjXVcyn4UcZpiSmSU5cwI5AdjA0Z3DSZTHJu5lPg8ZcjczS7I35iIAmIYzGfa12KskO6OuAIByjzP8gH6W5GWSJ0lujbcUACrcTPcpsZM6OTZL8mCUlQEwKTuZD%2FCH2rk8S3Ju1BUAMAl7GXZ3cmPc%2BABM0a3M5yEvs%2FlrsKMzlf3M78hcGDc%2BAFNzI8OeBpvFN8IA%2FnfOZT4HUSQAvJUHGeZ2vSIB4F8XMp%2BF7Ge9uYoiAWCpq1EkALyFdYrkWlk6ACZvVZG8TrJblg6AyVunSH4rSwfA5H2Z1UXyd5KzVQEBmLazSV5k9RHgO1UBAZi%2B37P6PslhkttVAQGYtt2sdzlRmQDQ6VrWvwE%2FS%2FJ%2BTUwApux21vvNk2dVAQGYvnXK5GFZOgCacCfLX3PdrYsGQAu%2ByPIdydW6aAC04G6WD9o%2FqosGQAsepr9IHhXmAqARy35Z8XphLgAa8EH6B%2B0HhbkAaMSP6d%2BNfF%2BYC4BGHKR%2FyP5eYS4AGnA9%2FbuRrcJcADTiUbp3IkoEgJU%2BjBIB4Ji20n1S693KUAC0oa9EzleGAqANW%2BkerF%2BuDAVAG%2FpK5KvKUAC0Yz%2BLJfJDaSIAmvFrFkvkl9JEADTjpyyWyJ%2BliQBoxtfpvityqjIUAG24nO7h%2BqXKUAC04Xy6S%2BS7ylAAtOF0kldZLJEXSd4pzAVAI3azWCKHSS5WhgKgDZfS%2FfmTbypDAdCGU0meZ7FEnsQXfQFYw7fpnot8XBkKgDZcTPeAfS%2FJ54W5AGjA6SR%2FpPu476eFuQBoxCdJ%2Fsp%2FC2SnNBEAzdjK%2FLjvz0k%2BK84CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADABv4B7KWsU334yWgAAAAASUVORK5CYII%3D
In one of my page I just need to render the saved image in a canvas...
Anyone please advice ?
the src attribute of an image can be a data-url - base64-encoded binary image data. The function canvas.toDataURL(); converts the content of the canvas to such a data URL. The code in the tutorial you posted then runs it through the encodeURIComponent function to get it into an ajax-friendly format.
When you retrieve that string from the database later, you need to run it through decodeURIComponent (this will replace %3A with :, %2F with a / and so on to turn it back into a syntactically correct data-url) and then assign the resulting string to a new Image() element. You should then be able to draw this image to a canvas.
I want to store the Image into my Server side Database. Once the user draw using canvas and hit a Submit button , Canvas Element should be converted to image format and then I want to store that Image into my database for further use. I can use this image to verify the user next time he visits my site.
Can anyone help me to sort it out? My server code is written in Java Servlets
Use Canvas.toDataURL() which will return a string with a base64 encoded PNG. You can then store it as a normal text or decode and save as a file. To put it back on canvas you simply pass this string as a source for Canvas.draw(source, 0, 0) method
Fiddle for you: http://jsfiddle.net/9a7Xd/
I am using Canvas2Image() function to convert an canvas element to Image of jpg (or) png format. I want to know where will this image be stored and how can I access the converted image?
As I read the documentation the user will be prompted to save the image as they wish. Additionally you cache make the function return a html img element if that's what you want.
But you can't save the image to the HDD and then modify it.
I have image as Bitmap:
var bitmapImage:Bitmap=getDefaultImage();
I need to set this bitmap as canvas backgroundImage.
I find method
myCanvas.setStyle("backgroundImage",url);
But i dont need url. Whent i do this:
myCanvas.setStyle("backgroundImage",bitmapImage);
I have an error.
How to set bitmap image in canvas background?
I am not sure if this is possible... You see, setStyle and getStyle in AS3.0 both work on CSS base. And in CSS there is nothing like Bitmap, just URLs, URIs, numeric, string and type values... Nothing for byte data.
So - either you use your Canvas wrong (don't use it at all maybe?), or, if you really need to use the setStyle method for this, you will have to use the URL... However, I think it might be possible to embed the file into the SWF... Not just with the Embed directive, but something like Flex project. It might be possible to address the file with local URL such as "myBitmap.png".