如何在fabric.js中使用蒙版合成图片

如何在fabric.js中使用蒙版合成图片

首页角色扮演大道同天更新时间:2024-06-23

  现在借助于Html5中Canvas可以实现在线对图片进行一些较复杂的编辑操作,如图片合成、裁剪、旋转、缩放、调整亮度、添加滤镜等等。但由于canvas原生api使用起来比较繁琐,特别是利用canvas对图片一些复杂的操作,如利用蒙版实现手机壳和图案在线合成并可调整图案大小及位置时,使用原生api的工作量非常大,且随着需求的调整、细化,代码会变得复杂且臃肿,难以维护,最终变成shit mountain堆在那里。

  当需要实现此类复杂的功能时,这就不得不借助于现成的canvas库了,比如fabric.js。fabric.js是一个功能强大且易用的Html5 Canvas js类库。使用fabric.js,我们可以轻松实现对图片进行在线合成、裁剪等复杂操作。

  本篇文章将介绍如何使用fabric.js实现带蒙版图片合成及调整、导出等。

  1. 安装并在js中引入fabric

//模块项目 npm install fabric --save import { fabric } from "fabric" //非模块化项目 <script src="fabric.js"></script>

  1. 在html中新建一个canvas标签

<canvas id="c" ></canvas>

  1. 初始化canvas

let id = 'c'; let canvas = new fabric.Canvas(id, { backgroundColor: '#fff',//背景色,默认透明背景 width: 800,//canvas画布宽度 height: 800//画布高度 })

  1. 添加背景图片

fabric.Image.fromURL(图片的URL, (img) => { img.scaleToHeight(800);//图片缩放到画布高度 canvas.add(img); canvas.sendToBack(img);//放在最底层 //也可以直接使用canvas.setBackgroundImage方法直接设置背景图片 }, { //也可以在回调里使用.set方法设置各个属性值 crossOrigin: "anonymous",//跨域时需要加上 selectable: false, left: 800 / 2, //显示在画布中间 top: 800 / 2, originX: 'center',//横坐标原点位置 originY: 'center',//纵坐标原点位置 });

注意: 要需要在回调函数里按实际宽或高度设置图片宽度或高度显示比例,img.scaleToHeight(800)

  1. 加载蒙版及图案

//先加载蒙版 fabric.Image.fromURL(蒙版url, (mask) => { mask.scaleToHeight(800); //加载图案 fabric.Image.fromURL(图案url, (img) => { img.scaleToHeight(800); canvas.add(img); }, { crossOrigin: "anonymous", left: 400, top: 400, originX: 'center', originY: 'center', selectable: false, borderColor: "#0091FF", //选中时边框颜色 borderScaleFactor: 2, //边框比例因子 cornerSize: 8,//边框控制角大小 padding: 0, cornerColor: "#0091FF", clipPath: mask,//指定蒙版图片 }); }, { crossOrigin: "anonymous", absolutePositioned: true,//根据实际设置,为true时固定显示,不随图案移动而移动 left: 400,//指定蒙版显示大小 top: 400, originX: 'center', originY: 'center', });

  1. 启用编辑
    设置图案图片的selectable属性为true,并设置图片对象为活动状态

img.set("selectable", true); canvas.setActiveObject(img); canvas.requestRenderAll();

  1. 保存编辑后的图案
    保存可以直接导出为图片,也可以导出为json

//导出为json let json = canvas.toJSON(); //将json保存到后台服务器,可以根据json对图片再次编辑,json中包含了调整后图片的高度、宽度、角度等信息 //导出为base64图片 let imgBase64 = canvas.toDataURL({ format:'png', multiplier: 2,//根据实际需要设置导出图片与当前canvas的比例,比例越大,导出图片的分辨率越高 });

  1. 对编辑过的图案再次编辑
    初始化canvas后,通过loadFromJSON加载图片,这样加载出来的图片是我们上次编辑后的图片,可以对其继续调整。

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

问题
  尽管fabric.js功能已经很强大,api也比较完善,结合官网文档可以快速实现我们的需求,但有一些细节问题需要我们去踩坑、去总结,比如:

  1. 加载json后图片位置大小等与上次我们编辑完保存的有些许差异,这是因为导出的json中的left、top、angle、scaleX、scaleY等只保留到小数点后两位,这样当我们的图片分辨率比较高时,差距尤其明显,解决此问题只需导出时指定我们需要保留的属性即可

let json = canvas.toJSON(['crossOrigin', 'selectable','angle', 'left', 'right', 'scaleX', 'scaleY']);

  1. 加载蒙版时别忘了指定蒙版图片属性的absolutePositioned为true(根据实际需要设置)
  2. 在vue等框架中通过条件渲染或列表渲染时需对canvas择机初始化,否则会找不到canvas元素导致初始化失败

let canvas = new fabric.Canvas(id, { backgroundColor: '#fff',//背景色,默认透明背景 width: 800,//canvas画布宽度 height: 800//画布高度 })

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved