wolf-table / table

A web-based(canvas) JavaScript Table
MIT License
349 stars 33 forks source link

How to add or paste an image? #6

Open yansenlei opened 11 months ago

yansenlei commented 11 months ago

How to add or paste an image?

ayuechuan commented 10 months ago

渲染单元格图片 我给你简单举个例子

 fillImage(box: Box, cell: any, { fixWidth, fixHeight }: { fixWidth: number, fixHeight: number }, callback?: (width: number, height: number) => void) {
    const { x, y, width, height } = box;
    const dx = x + fixWidth;
    const dy = y + fixHeight;
    const { startRowIndex, startColIndex } = cell;

    const cellImage = this.imageCaches.get(`${startRowIndex}.${startColIndex}`);
    if (cellImage) {
      this.save()
      this.clearRect(x, y, width, height);
      this.context.drawImage(cellImage, Pixel.npx(x), Pixel.npx(y), Pixel.npx(width), Pixel.npx(height));
      this.restore();
    } else {
      const image = new Image();
      image.src = 'https://theanam.github.io/react-awesome-lightbox/img/2.jpg'
      image.onload = () => {
        this.save()
        this.context.drawImage(image, Pixel.npx(dx), Pixel.npx(dy), Pixel.npx(image.width / 10), Pixel.npx(image.height / 10));
        this.restore();
        this.imageCaches.set(`${startRowIndex}.${startColIndex}`, image)
        callback?.(Pixel.npx(image.width / 12), Pixel.npx(image.height / 12));
      }
    }
  }