Rust Yew中stdweb的Element转CanvasElement报错解决方法

使用Rust开发Yew Web应用时，需要通过CSS选择器匹配DOM元素，拿到CanvasRenderingContext2d绘图上下文，核心卡点是无法将query_selector返回的stdweb::web::Element类型转换为stdweb::web::html_element::CanvasElement类型。

原实现代码如下：

use stdweb::web::{CanvasRenderingContext2d, document, Element, IParentNode};
use stdweb::web::html_element::CanvasElement;

fn get_canvas_context(selector: &str) -> CanvasRenderingContext2d {
    let element: Element = document().query_selector(selector)
        .expect(format!("query_selector({selector}) not found").as_str())
        .unwrap()
    ;
    // 编译报错：the trait `From<stdweb::web::Element>` is not implemented for `CanvasElement`
    let canvas_element: CanvasElement = element
        .try_into()
        .expect(format!("query_selector({selector}) not CanvasElement").as_str())
    ;
    let context: CanvasRenderingContext2d = canvas_element.get_context()
        .expect(format!("query_selector({selector}) failed to get_context()").as_str())
    ;
    context
}

执行cargo check抛出的编译错误：

error[E0277]: the trait bound `CanvasElement: From<stdweb::web::Element>` is not satisfied
  --> src/utils.rs:12:10
   |
12 |         .try_into()
   |          ^^^^^^^^ the trait `From<stdweb::web::Element>` is not implemented for `CanvasElement`
   |
   = note: required because of the requirements on the impl of `Into<CanvasElement>` for `stdweb::web::Element`
   = note: required because of the requirements on the impl of `std::convert::TryFrom<stdweb::web::Element>` for `CanvasElement`
   = note: required because of the requirements on the impl of `std::convert::TryInto<CanvasElement>` for `stdweb::web::Element`

• 代码中调用的try_into()来自Rust标准库的std::convert::TryInto trait，stdweb并没有基于标准库的转换trait实现Element到CanvasElement的转换逻辑，因此trait bound校验失败。
• 原代码中expect(format!(...).as_str())的写法存在生命周期隐患：format!生成的临时String会在语句执行完前被释放，as_str()拿到的字符串引用会成为悬垂引用。

stdweb为DOM元素类型转换提供了原生支持，推荐直接使用IElement trait提供的专属元素转换方法try_into_canvas()，不需要额外引入转换trait，也不会和标准库的TryInto产生冲突。

修正后的完整代码：

use stdweb::web::{CanvasRenderingContext2d, document, IParentNode, IElement};
use stdweb::web::html_element::CanvasElement;

fn get_canvas_context(selector: &str) -> CanvasRenderingContext2d {
    let element = document()
        .query_selector(selector)
        // 直接传String给expect，避免悬垂引用
        .expect(format!("query_selector({selector}) not found"))
        .unwrap();
    
    // 直接调用canvas专属转换方法，返回Result<CanvasElement, ConversionError>
    let canvas_element: CanvasElement = element
        .try_into_canvas()
        .expect(format!("query_selector({selector}) target is not a CanvasElement"));
    
    canvas_element
        .get_context()
        .expect(format!("query_selector({selector}) failed to get 2d rendering context"))
}

如果你更习惯用通用的try_into()写法，只需要引入stdweb自带的TryInto trait即可，注意不要引入标准库的同名trait：

// 替换标准库的TryInto，引入stdweb自己的转换trait
use stdweb::unstable::TryInto;

// 后续element.try_into()即可正常转换为CanvasElement
let canvas_element: CanvasElement = element
    .try_into()
    .expect(format!("query_selector({selector}) target is not a CanvasElement"));

• 所有stdweb内置的HTML元素类型都有对应的try_into_xxx()转换方法，比如try_into_input_element()、try_into_div_element()等，都属于IElement trait的方法，只要导入use stdweb::web::IElement即可直接调用。
• 该方案仅适用于基于stdweb的Yew 0.18及更早版本，如果Yew版本较新已经切换到web-sys作为Web绑定，转换逻辑会有差异。

内容的提问来源于stack exchange，提问作者James McGuigan