javascript 编辑de imagem简单

Posted 2021-05-03

let ctx = document.documentGetId('canvas_id').getContext('2d');
ctx.resetTransform();
ctx.resetTransform();
let imagem = new Image();
imagem.src = this.props.imagem;
imagem.onload = () => {
    let largura = 850;
    let altura = 584;

    ctx.clearRect(0, 0, largura, altura);

    let x = this.props.x + this.props.ref_x_state;
    let y = this.props.y + this.props.ref_y_state;

    let escala = this.props.escala / 100 + 1;
    ctx.translate(largura / 2, altura / 2);
    ctx.scale(escala, escala);
    ctx.translate(x, y);
    ctx.rotate(this.props.giro / 20 * Math.PI / 180);
    ctx.translate(largura / -2, altura / -2);
    ctx.drawImage(imagem, 0, 0);

    // ctx.fillStyle = '#FF0000';
    // ctx.fillRect(largura / 2 - 2, altura / 2 - 2, 4, 4);
};