使用 React Konva 时隐藏下载的透明图像

如何解决使用 React Konva 时隐藏下载的透明图像

我只想下载木瓜方形盒子，后面没有透明图片。

dont download transparent image

我正在使用 React Konva。我有以下代码：

class Server{
public:
    Server(){}

    //start the server
    void Start(unsigned short port_num,unsigned int thread_pool_size)
    {
        assert(thread_pool_size > 0);

        //create specified number of threads and add them to the pool
        for(unsigned int i = 0; i < thread_pool_size; ++i)
        {
            std::unique_ptr<std::thread> th(
                new std::thread([this]()
                {
                    m_ios.run();
                }));

            m_thread_pool.push_back(std::move(th));
        }

        //create and start acceptor
        acc.reset(new my_acceptor(m_ios,port_num));
        acc->Start();
    }

    //stop the server
    void Stop()
    {
        work_guard.reset();
        acc->Stop();
        m_ios.stop();


        for(auto& th : m_thread_pool)
        {
            th->join();
        }
    }

private:
    asio::io_context m_ios;
    boost::asio::executor_work_guard<boost::asio::io_context::executor_type> work_guard = boost::asio::make_work_guard(m_ios);
    std::unique_ptr<my_acceptor> acc;
    std::vector<std::unique_ptr<std::thread>> m_thread_pool;
};

代码沙盒 → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl?file=/src/App.tsx

如何只下载木瓜矩形部分？

解决方法

原则上，

隐藏您不想包含在图像中的任何形状，
获取图片
取消隐藏您在 1 中隐藏的内容。

注意：不要在 1 到 3 之间绘制图层/舞台，否则您会看到不需要的闪烁。

您可以将 x、y、width 和 height 属性传递给 stage.toDataURL(options) 函数以仅捕获屏幕的一部分：

const options = {
  mimeType: `image/png`,quality: 1,pixelRatio: 1,width: browser.width,height: browser.height,x: pad / 2,y: (win.height - browser.height) / 2
};
const img = stageRef.current?.getStage().toDataURL(options);

https://codesandbox.io/s/react-konva-export-part-of-the-stage-hf5sn

我在安东的帮助下解决了这个问题。 Vanquished Wombat 的方法也是一样的。

sed

更新代码沙盒 → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl?file=/src/App.tsx