场景

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

Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

注：

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

实现

1、官方教程

Introduction to Fabric.js. Part 1. — Fabric.js Javascript Canvas Library

2、添加一张照片

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上插入照片并设置缩小和翻转属性相关推荐

Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的 ...
教师资格证网站服务器,教师资格证网上报名上传照片IE设置
由于报名系统兼容性不足,所以不支持手机.ipad浏览器报名,只能用电脑报名.但是现在很多人的电脑默认的浏览器已经是IE11,所以打开后会提示"报名系统目前不支持IE11,请使用IE6-IE1 ...
ZeroMQ接口函数之：zmq_setsockopt –设置ZMQ socket的属性
Name zmq_setsockopt –设置ZMQ socket的属性 Synopsis int zmq_setsockopt (void *socket, int option_name, con ...
zmq_setsockopt ——设置ZMQ socket的属性
ZeroMQ API 目录 :http://www.cnblogs.com/fengbohello/p/4230135.html 本文地址 :http://www.cnblogs.com/fengbo ...
移动端上传照片预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）...
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览需求二:然后绘制在canvas画布上这里,我们先看一个demo(http://jsfiddle.net/q ...
手机端上传照片压缩功能canvas
手机上传照片拍摄的照片像素很高需要压缩后上传,移动端前端压缩照片的方法一般是用canvas,然后转换成base64或者blob,发送后台. <div class="img-btn1&q ...
手机端上传照片实现压缩、拖放、缩放、裁剪、合成拼图等功能
一.序如题,最近工作中遇到一个移动端用户上传照片,然后在线编辑,添加一些别的图片合成的功能,类似于超级简化版美图秀秀.总结了一下,大致操作包含上传图片,图片压缩.触摸拖动图片.放大/缩小.添加别的 ...
ipad和iphone切图_如何在iPhone和iPad上密码保护照片
ipad和iphone切图 Sometimes, you need to protect your iPhone or iPad photos from prying eyes that might ...
uni-app 实现照片水印并上传照片
话不多说,直接代码 <template><view class="wrap"><u-form :model="model" ref ...

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

场景

实现

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

最新文章

热门文章