Export to image

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Export a 3d model too a image
2.
3.

What is the expected output? What do you see instead?
Is it possible to export a 3d model too a  2d image?

What version of the product are you using? On what operating system?

Please provide any additional information below.

Original issue reported on code.google.com by papa...@gmail.com on 24 Dec 2013 at 2:12

[GoogleCodeExporter]

Do you mean taking screenshots? It can be done as following:

For Firefox 

Open context menu upon the canvas -> [save picture as] -> save the drawing as a 
local image file.

For any browser

Use the given single line of JavaScript:

  window.open(canvas.toDataURL());

which opens a new page with the screenshot. You can then save the image 
manually.

Original comment by Humu2...@gmail.com on 25 Dec 2013 at 3:45

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

i want to export the image of a designed product and save that image to a 
database collection:

(function () {
    "use strict";
    var canvas, content, viewer, duckConfigurator = {

        loadDuck: function () {
            content = document.createElement('div');
            content.setAttribute('id', 'content');
            content.setAttribute('style', 'width:100%; height:100%; ');

            var html = '<p><canvas id="canvas" width=800; height=400;></canvas></p>';
            document.body.innerHTML = html;

            viewer = new JSC3D.Viewer(document.getElementById('canvas'));
            viewer.setParameter('SceneUrl',         'product/car.obj');
            viewer.setParameter('ModelColor',       '#FFFFFF');
            viewer.setParameter('BackgroundColor1', '#FFFFFF');
            viewer.setParameter('BackgroundColor2', '#FFFFFF');
            viewer.setParameter('RenderMode',       'textureSmooth');
            viewer.setParameter('setDefinition', 'high');
            viewer.onmousedown = function (x, y, button, depth, mesh) {
                if (button === 0 && mesh !== null) {

                  var color = 0x000080;
                  var newMat = new JSC3D.Material('', 0, color, 0, true);
                  mesh.setMaterial(newMat);

                    viewer.update();

                }
                if(button === 2){
                    duckConfigurator.export();
                }
            };
            viewer.init();
            document.body.appendChild(content);

        },
        export : function () {
        // EXPORT IMAGE TO C/Configurator/products
                console.log("export");

        }
    };
    window.duckConfigurator = duckConfigurator;
    duckConfigurator.loadDuck();
}());

Original comment by papa...@gmail.com on 27 Dec 2013 at 1:04

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

Use canvas.toDataURL() method to get current state of the canvas as an image 
encoded in base64. For example:

  var dataURI = canvas.toDataURL('image/jpeg');

The returned value is a string representation of the image which can be 
submitted to database directly.  The result can even be converted to binary 
stream, which can be treated as blob on database, through the atob() method 
provided by browser. See 
http://stackoverflow.com/questions/6850276/how-to-convert-dataurl-to-file-object
-in-javascript for how to achieve this.

Original comment by Humu2...@gmail.com on 28 Dec 2013 at 5:15

• Added labels: ****
• Removed labels: ****