【前端】canvas图片加文字

原创

已于 2024-01-24 10:23:03 修改 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js #交互 #canva可画

于 2024-01-24 10:16:53 首次发布

本文详细介绍了如何在前端项目中利用JavaScript的canvas API，结合React.js，实现在图片上动态添加文字的功能，适用于创建交互式的图像处理应用。

注释标记了操作步骤：

import React, {
   
    Component, createRef } from 'react';

class CertifyImgRender extends Component {
   
   
  $bgRef = createRef<HTMLCanvasElement>()
  $textRef = createRef<HTMLCanvasElement>()
  
  async renderImage() {
   
   
    const img = new Image()
    img.crossOrigin = "anonymous";
    const canvas = this.$bgRef.current;
    const ctx = canvas.getContext('2d')