我们已经学会了在Canvas上画简单的图形，这节我们就在Canvas上加一张图片。用到fabric.Image对象把图片添加到Canvas上。

HTML文件：为了效果更好看我在html里写了一些CSS样式。

<!DOCTYPE html>

<html lang="en">

    <head>

        <title></title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

       <script type="text/javascript" src="../fabric.js"></script>

        <style>

        body{

            background-color: #ccc;

        }

        #canvas{

            display:block;

            background-color:#fff;

            border:1px solid #000;

        }

        #jspang-img{

            display:none;

        }

        </style>

    </head>

    <body>

        <canvas id="canvas" width='800' height='800'></canvas>

        <img src="./jsapng.png" id="jspang-img">

        <script type="text/javascript" src="./script.js"></script>

    </body>

</html>

JS文件：

var canvas = new fabric.Canvas('canvas');//声明画布

var imgElement = document.getElementById('jspang-img');//声明我们的图片

var imgInstance = new fabric.Image(imgElement,{  //设置图片在canvas中的位置和样子

     left:100,

     top:100,

     width:200,

     height:100,

     angle:30

});

canvas.add(imgInstance);//加入到canvas中

通过上面步骤，我们已经把图片加到了canvas里，并用angle:30设置了顺时针旋转30度。我们其实还可以用opacity:0.8设置图片的透明度为80%。

大多数工作开发中我们在html里是没有<img>标签的，我们只知道一个图片的地址，那我们也可以直接用javascript代码把图片加入到canvas里的。

HTML文件：

<!DOCTYPE html>

<html lang="en">

    <head>

        <title></title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

       <script type="text/javascript" src="../fabric.js"></script>

        <style>

        body{background-color: #ccc;}

        #canvas{display:block;background-color:#fff;border:1px solid #000;}

        </style>

    </head>

    <body>

        <canvas id="canvas" width='800' height='800'></canvas>

        <script type="text/javascript" src="./script.js"></script>

    </body>

</html>

JS文件：

var canvas = new fabric.Canvas('canvas');

fabric.Image.fromURL('./jsapng.png', function(oImg) {

    oImg.scale(0.1);//图片缩小10倍

  canvas.add(oImg);

});

（转）第03节：在Canvas上插入图片并设置旋转属性的更多相关文章

  1. 前端使用html2canvas截图，在canvas上绘制图片及保存图片

    1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...

  2. 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域

    使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...

  3. 【Servlet3.0新特性】第03节_文件上传

    这是一个Web Project 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web- ...

  4. 插入数据值 设置标签属性的值 来自 精通ASP-NET-MVC-5-弗瑞曼

  5. canvas中插入的图片 自适应 ？

    注意 不是用canvas画图 是在canvas中插入图片 我很是惊讶  为啥明明img标签就能解决的非要用canvas 不过别人写好的 我一般不会动 需求是 canvas中的图片自适应不能拉伸…… 老 ...

  6. canvas插入图片设置背景，渐变

    ##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...

  7. canvas 2.0 图片绘制

    绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...

  8. Excel催化剂开源第40波-Excel插入图片做到极致的效果

    不知道是开发人员的自我要求不高还是用户的使用宽容度足够大,在众多Excel插入图片的版本中,都没有考虑到许多的可大幅度提升用户体验的细节处理. Excel催化剂虽然开发水平有限,但也在有限的能力下,尽 ...

  9. Hexo博客插入图片的方法

    Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...

随机推荐

  1. 使用豆瓣源安装python包

    Python pip安装的原理就是从Python的官方源https://pypi.python.org/pypi下载到本地安装, 但是访问官方源网络不稳定,速度较慢,我经常会遇到一个问题,pip安装包 ...

  2. 6-Python操作MySQL-增(insert)-删(delete)-改(update)-查(select)

    增删改 from pymysql import * def main(): # 创建Connection连接 conn = connect(host='localhost',port=3306,dat ...

  3. codeforces round#524 D - Olya and magical square /// 大概算是数学规律题？

    题目大意: t 个测试用例  (1≤t≤103) 给定n k  (1≤n≤10^9,1≤k≤10^18) 表示有一个边长为2^n的正方形格子 每次操作只能将一个格子切割为左上左下右上右下的四等分格子 ...

  4. Linux安全审计-基础篇

    安全审计这块我能想到的有两种方案可以解决,一种是在Linux中配置实现,一种是使用Python开发堡垒机实现,我先实现了第一种比较简单的:后面会开发堡垒机:   一.首先我们需要在/etc/profi ...

  5. verifier 调试内存泄露

    没啥技术含量,都是老段子了, 这次记下来,只是我想说,我也做过,留个念相. 前置条件,电脑里面必须得有Verifier,有了之后把自己的驱动加进去, WinDBG上双机,然后就可以跑了,跑一段时间就可 ...

  6. windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问

    windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问: 解决方法: 首先重命名系统盘 windows目录下的代号为“SoftwareDistribu ...

  7. Error: Cannot find module '@babel/core'

    报错如下 产生原因 babel-loader和babel-core版本不对应所产生的, babel-loader 8.x对应babel-core 7.x babel-loader 7.x对应babel ...

  8. JSON 单例类

    MD5JSON.h #pragma once #include "include/json/json.h" #include "include/md5/md5.h&quo ...

  9. linux watch命令查看网卡流量

    watch命令可以反复的执行一个命令,默认时间间隔为2秒钟.TX是发送(transport),RX是接收(receive)RX bytes:总下行流量TX bytes:总上行流量 可以每隔两秒监视网络 ...

  10. angular2 组件内容嵌入（ng-content）

    一.简介 内容嵌入是组件的一个高级功能特性,使用组件的内容嵌入特性能很好地扩充组件的功能,方便代码的复用. 二.用法 如上,在模版中使用了<ng-content>标签,这个标签就是用来渲染 ...