returnture 2022-08-04 10:17 采纳率: 66.7%
浏览 512
已结题

fabric.js 填充图片使用toDataURL 导出base64格式的图片并放大图片

问题遇到的现象和发生背景

fabric.js 填充图片使用toDataURL 导出base64格式的图片并放大图片,并且让填充的不裁剪

问题相关代码,请勿粘贴截图
<template>
  <div>
    <div style="margin: 0 auto">
      <canvas
        id="canvas"
        width="600"
        height="600"
        style="width: 600px; height: 600px; border: 1px solid #333"
      ></canvas>
    </div>
    <el-button @click="addImg">添加图片</el-button>
    <el-button @click="exportImg">导出图片</el-button>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      cvs: null,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    addImg() {
      var that = this;
      const imG = new Image();
      imG.crossOrigin = "Anonymous";
      imG.src =
        "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0515%2Fbfedfd18j00qadpg00014c000hs00b4c.jpg&thumbnail=660x2147483647&quality=80&type=jpg";
      fabric.Image.fromURL(
        imG.src,
        (img) => {
          that.cvs.add(
            img.set({
              scaleX: 1,
              scaleY: 1,
            })
          );
          that.cvs.renderAll();
          that.cvs.fire("object:modified", {
            target: img,
          });
        },
        { crossOrigin: "anonymous" }
      );
    },
    exportImg() {
      // var tempScaleX = this.cvs.getActiveObject().scaleX * 1;
      // var tempScaleY = this.cvs.getActiveObject().scaleY * 1;
      // this.cvs.getActiveObject().scaleX = tempScaleX;
      // this.cvs.getActiveObject().scaleY = tempScaleY;
      // this.cvs.renderAll();
      // this.cvs.calcOffset();
      let url = this.cvs.toDataURL({
        width: 300,
        height: 300,
        multiplier: 3,
      });
      this.cvs.requestRenderAll();
      console.log(url);
    },
  },
  // 以下是生命周期钩子   注:没用到的钩子请自行删除
  /**
   * 组件实例创建完成,属性已绑定,但DOM还未生成,$ el属性还不存在
   */
  created() {},
  async mounted() {
    this.cvs = new fabric.Canvas("canvas", {
      preserveObjectStacking: true,
      width: 600,
      height: 600,
    });
    // 控件
    fabric.Object.prototype.set({
      hasControls: true, // 是否开启图层的控件
      borderColor: "red", // 图层控件边框的颜色
      cornerColor: "red", //激活状态角落图标的填充颜色
      cornerStrokeColor: "red", //激活状态角落图标的边框颜色
      cornerSize: 6, //控制点大小
      transparentCorners: false, //激活状态角落的图标是否透明
    });
  },
};
</script>

<style scoped lang="less">
/deep/ .canvas-container {
  margin: 50px auto;
}
</style>

运行结果及报错内容

在浏览器的效果

img


导出base64 图片发生了裁剪

img

  • 写回答

1条回答 默认 最新

  • 雾里桃花 2022-08-04 10:40
    关注

    我觉得应该是这样,你原始渲染在浏览器的时候宽高填的是600,导出的时候想把它放大,但是你导出的时候填的宽高却变成了300,如果你想让它放大,导出的时候宽高应该是 600 * 放大的倍数才对

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 8月12日
  • 已采纳回答 8月4日
  • 创建了问题 8月4日

悬赏问题

  • ¥15 微信公众号如何开发网页
  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上