在TMS Web Core中如何从TWebImageControl组件获取Bitmap？

TMS Web Core的TWebImageControl基于Web的<img>元素实现，和VCL里的Image组件逻辑不同，它没有直接暴露Bitmap属性，所以直接访问Bitmap会触发标识符找不到的错误。要获取图像的像素数据或进行位图操作，可以用以下两种方式：

方式1：使用组件自带的Canvas接口 #

TWebImageControl提供了Canvas属性，可通过它直接操作图像内容，比如读取指定坐标的像素颜色：

var
  WebCanvas: TWebCanvas;
begin
  WebCanvas := WebImageControl2.Canvas;
  // 示例：获取(10,10)坐标的像素颜色值
  ShowMessage('像素颜色: ' + WebCanvas.Pixels[10,10].ToString);
end;

方式2：借助HTML5 Canvas API获取完整图像数据 #

如果需要提取整个图像的位图数据，可以把TWebImageControl的图像绘制到HTML5 Canvas上，再提取像素信息：

var
  JSCanvas: TJSHTMLCanvasElement;
  JSContext: TJSCanvasRenderingContext2D;
  ImageData: TJSImageData;
begin
  // 创建Canvas元素并设置尺寸匹配图像
  JSCanvas := TJSHTMLCanvasElement.New;
  JSCanvas.width := WebImageControl2.Width;
  JSCanvas.height := WebImageControl2.Height;
  
  // 获取Canvas绘图上下文
  JSContext := JSCanvas.getContext('2d');
  // 将WebImageControl的图像绘制到Canvas
  JSContext.drawImage(WebImageControl2.Element, 0, 0);
  
  // 获取完整的图像像素数据
  ImageData := JSContext.getImageData(0, 0, JSCanvas.width, JSCanvas.height);
  // ImageData.data是RGBA格式的像素数组，每4个元素对应一个像素的红、绿、蓝、透明度值
  ShowMessage('总像素数: ' + IntToStr(ImageData.data.length div 4));
end;

注意：如果图像是跨域资源，这种方式会触发浏览器安全限制，需要确保图像与网站同域，或者服务器配置了跨域允许头。

内容的提问来源于stack exchange，提问作者Shaun Roselt