Fabricjs在Canvas上插入照片并设置缩小和翻转属性

布满荆棘的人生 2023-10-01 17:51 2阅读 0赞

## 场景 ##

Fabricjs一个简单强大的Canvas绘图库快速入门：

[Fabricjs一个简单强大的Canvas绘图库快速入门\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Fabricjs_Canvas_BADAO_LIUMANG_QIZHI_-CSDN]

在上面的基础上，怎样在Canvas中插入照片并设置缩小和翻转属性。

![596639ef5a4e400a98a8ec0bc536d8e3.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、官方教程

[Introduction to Fabric.js. Part 1. — Fabric.js Javascript Canvas Library][Introduction to Fabric.js. Part 1. _ Fabric.js Javascript Canvas Library]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

2、添加一张照片

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

3、添加照片到Canvas并缩小图像和翻转它

fabric.Image.fromURL('images/light.png', function(oImg) {
            // scale image down, and flip it, before adding it onto canvas
            //缩小图像并翻转它
            oImg.scale(0.5).set('flipX', true);
            canvas.add(oImg);
          });

4、完整示例代码

<template>
      <div>
        <div>
          <canvas id="c" width="800" height="800"></canvas>
        </div>
      </div>
    </template>
    
    <script>
    import { fabric } from "fabric";
    export default {
      name: "HelloFabric",
      data() {
        return {};
      },
      mounted() {
        this.init();
      },
      methods: {
        init() {
          // create a wrapper around native canvas element (with id="c")
          // 声明画布
          var canvas = new fabric.Canvas("c");
    
          // create a rectangle object
          // 绘制图形
          var rect = new fabric.Rect({
            left: 100, //距离画布左侧的距离，单位是像素
            top: 100, //距离画布上边的距离
            fill: "red", //填充的颜色
            width: 20, //方形的宽度
            height: 20, //方形的高度
          });
    
          // "add" rectangle onto canvas
          //添加图形至画布
          canvas.add(rect);
    
          fabric.Image.fromURL('images/light.png', function(oImg) {
            // scale image down, and flip it, before adding it onto canvas
            //缩小图像并翻转它
            oImg.scale(0.5).set('flipX', true);
            canvas.add(oImg);
          });
        },
      },
    };
    </script>

[Fabricjs_Canvas_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122850075
[596639ef5a4e400a98a8ec0bc536d8e3.gif]: https://img-blog.csdnimg.cn/596639ef5a4e400a98a8ec0bc536d8e3.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[Introduction to Fabric.js. Part 1. _ Fabric.js Javascript Canvas Library]: http://fabricjs.com/fabric-intro-part-1#objects
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d9bb9abf976a4ac7b9ac142736d502cd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/b57228394ad4430abe987c37d0e12903.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16