GWT画布 - 保存图像并打开它

问题描述

我将图像保存为一个字符串，然后当我打开它时，它始终是300x150

I save an image in a String, then when I open it it's always 300x150

为什么图像被截断？

300x150从哪里来？

Where does 300x150 come from?

代码就是您所看到的。只有2个按钮。

The code is what you see. Just 2 buttons.

第一个将图像保存为png，另一个从png读取图像

The first one saves the image in "png", and the other reads the image from "png"

                    Button save = new Button("copy");
                    save.addClickHandler(new ClickHandler() {
                        @Override
                        public void onClick(ClickEvent event) {
                            ImageElement imageElement = ImageElement.as(image.getElement());

                            Canvas canvasTmp = Canvas.createIfSupported();
                            Context2d context = canvasTmp.getContext2d();
                            context.drawImage(imageElement, 0.0, 0.0, imageElement.getWidth(), imageElement.getHeight());
                            png = canvasTmp.toDataUrl("image/png");
                        }
                    });

                    Button open = new Button("open");
                    open.addClickHandler(new ClickHandler() {

                        @Override
                        public void onClick(ClickEvent event) {

                            final Image image = new Image(png);
                            vp.add(image);
                            image.addLoadHandler(new LoadHandler() {

                                @Override
                                public void onLoad(LoadEvent event)
                                {
                                    Window.alert("ok");
                                }
                            });

                            image.addErrorHandler(new ErrorHandler() {

                                @Override
                                public void onError(ErrorEvent event) {
                                    Window.alert("error");
                                }
                            } );

                        }
                    });

推荐答案

画布的默认宽度为300像素，默认高度为150像素。在创建画布和绘制图像之前，请考虑这样做：

The canvas has a default width of 300 pixels and a default height of 150 pixels. After creating the canvas and before drawing the image, consider doing this:

int width = imageElement.getWidth()
int height = imageElement.getHeight()
canvasTmp.setWidth(width + "px");
canvasTmp.setHeight(height + "px");
canvasTmp.setCoordinateSpaceWidth(width);
canvasTmp.setCoordinateSpaceHeight(height);

这篇关于GWT画布 - 保存图像并打开它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！