HarmonyOS 鸿蒙Next List超过屏幕内容怎么截长图呢

可以试下这个

import { componentSnapshot, display } from '@kit.ArkUI'
import { image } from '@kit.ImageKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct ListSnapShot {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
listID: string = ‘list’;
@State pixelMap: PixelMap | null = null;
scroller: Scroller = new Scroller();
bufferArr: ArrayBuffer[] = [];
tempPixelMap: PixelMap | null = null;
scrollOffsets: number[] = []; // 每屏List的起始位置
densityPixels: number = 0; // 屏幕像素密度，是px单位和vp单位的比例关系，px = densityPixels * vp
listWidth: number = 0;
listHeight: number = 0;
stride: number = 0;
aboutToAppear(): void {
let defaultDisplay = display.getDefaultDisplaySync();
this.densityPixels = defaultDisplay.densityPixels;
}
getPixelMap() {
let pixelOffset: number = 0;
for (let i = 0; i < this.bufferArr.length; i++) {
pixelOffset += this.scrollOffsets[i];
}
let opts: image.InitializationOptions = { editable: true, pixelFormat: 3, size: { width: this.listWidth, height: this.scrollOffsets[this.scrollOffsets.length - 1] * this.densityPixels + this.listHeight } };
this.pixelMap = image.createPixelMapSync(opts);
this.tempPixelMap = image.createPixelMapSync(opts);
<span class="hljs-keyword"><span class="hljs-keyword">for</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> i = <span class="hljs-number"><span class="hljs-number">0</span></span>; i &lt; <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.bufferArr.length; i++) {
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> area: image.PositionArea = {
    pixels: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.bufferArr[i],
    offset: <span class="hljs-number"><span class="hljs-number">0</span></span>,
    stride: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.stride,
    region: {
      size: {
        width: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listWidth,
        height: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listHeight
      },
      x: <span class="hljs-number"><span class="hljs-number">0</span></span>,
      y: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.scrollOffsets[i] * <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.densityPixels
    }
  }

  <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tempPixelMap?.writePixels(area, (error: BusinessError) =&gt; {
    <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (error) {
      console.log(<span class="hljs-string"><span class="hljs-string">'error: '</span></span> + <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(error));
    } <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
      console.log(<span class="hljs-string"><span class="hljs-string">'no error'</span></span>);
    }
  })
}
<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.pixelMap = <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tempPixelMap;
}
getPixelMapData() {
//将List的当前滚动量记录下来
let scrollOffset = this.scroller.currentOffset();
this.scrollOffsets.push(scrollOffset.yOffset);
componentSnapshot.get(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listID, (error: <span class="hljs-built_in"><span class="hljs-built_in">Error</span></span>, pixmap: PixelMap) =&gt; {
  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listWidth == <span class="hljs-number"><span class="hljs-number">0</span></span>) {
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> imageInfo = pixmap.getImageInfoSync();
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listWidth = imageInfo.size.width;
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listHeight = imageInfo.size.height;
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.stride = pixmap.getBytesNumberPerRow();
  }
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> bytesNumber = pixmap.getPixelBytesNumber();
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> buffer: <span class="hljs-built_in"><span class="hljs-built_in">ArrayBuffer</span></span> = <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> <span class="hljs-built_in"><span class="hljs-built_in">ArrayBuffer</span></span>(bytesNumber);
  pixmap.readPixelsToBufferSync(buffer);
  <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.bufferArr.push(buffer);

  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (!<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.scroller.isAtEnd()) {<span class="hljs-comment"><span class="hljs-comment">//滚动截图，如果没有滚到底，则继续滚到下一页</span></span>
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.scroller.scrollPage({ next: <span class="hljs-literal"><span class="hljs-literal">true</span></span> });
    setTimeout(() =&gt; {<span class="hljs-comment"><span class="hljs-comment">//由于scrollPage存在延时，这里使用setTimeout，避免还未滚到下一页就又开始获取重复buffer</span></span>
      <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.getPixelMapData();
    }, <span class="hljs-number"><span class="hljs-number">220</span></span>)
  } <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {<span class="hljs-comment"><span class="hljs-comment">//滚到底后，拿到之前获取的buffer，进行拼接生成长图</span></span>
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.getPixelMap();
  }
})
}
build() {
Column() {
List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text(’’ + item)
.width(‘100%’).height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.id(this.listID)
.listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off)
.friction(0.6)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
.width(‘90%’)
.height(‘50%’)
Button(‘截图’)
.onClick(() => {
this.getPixelMapData();
})
  Scroll() {
    Image(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.pixelMap)
      .width(<span class="hljs-string"><span class="hljs-string">'80%'</span></span>)
      .objectFit(ImageFit.Contain)
  }
  .scrollable(ScrollDirection.Vertical)
  .height(<span class="hljs-string"><span class="hljs-string">'40%'</span></span>)
}
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.backgroundColor(<span class="hljs-number"><span class="hljs-number">0xDCDCDC</span></span>)
.padding({ top: <span class="hljs-number"><span class="hljs-number">5</span></span> })
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>