我们已经学会了在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. linux mysql 远程访问权限问题

    1.为了让访问mysql的客户端的用户有访问权限,我们可以通过如下方式为用户进行授权:mysql> grant all on *.* to user_name@'%' identified by ...

  2. mybatis 处理CLOB/BLOB类型数据

    BLOB和CLOB都是大字段类型. BLOB是按二进制来存储的,而CLOB是可以直接存储文字的. 通常像图片.文件.音乐等信息就用BLOB字段来存储,先将文件转为二进制再存储进去.文章或者是较长的文字 ...

  3. pip修改官方源为豆瓣源

    参考地址: https://www.jianshu.com/p/10a23d6a93c6 1.临时修改 pip install pythonModuleName -i https://pypi.dou ...

  4. Activiti学习笔记10 — 动态任务分配

    动态任务分配使用的两种方式 一.通过特殊表达式,来获取任务信息 ,在流程 UserTask节点上设置 ${流程变量的Key} 1.流程定义 <?xml version="1.0&quo ...

  5. 转： PHP中this,self,parent的区别

    {一}PHP中this,self,parent的区别之一this篇 面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能.利用OOP的思想进行P ...

  6. jvm虚拟内存分布 与 GC算法

    jvm虚拟内存分布 程序计数器(PC寄存器)(线程私有): 每个线程启动的时候,都会创建一个PC(Program Counter,程序计数器)寄存器. PC寄存器的内容总是指向下一条将被执行指令的地址 ...

  7. SQL Server Management Studio 的账号密码

    使用“Windows身份验证”方式无法登陆 使用“SQL Server身份验证” 方式无法登陆 解决办法:关闭当前所有服务.通过[Microsoft SQL Server 2008]|[配置工具]|[ ...

  8. PHP MVC运用

    php中的MVC模式运用 首先我来举个例子: 一个简单的文章显示系统 简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉及文章的发布,现在开始了. 由于只涉及数据库的读取,所以我定义了两个 ...

  9. C++在#include命令中，用〈 〉和“”有什么区别

    使用尖括号表示在包含文件目录中去查找(包含目录是由用户在设置环境时设置的),而不在源文件目录去查找: 使用双引号则表示首先在当前的源文件目录中查找,若未找到才到包含目录中去查找.  

  10. SpringCloud及其五大常用组件之Eureka和Zuul

    1.springcloud简介 SpringCloud是Spring旗下的项目之一,它是微服务架构的一种实现方式. 官网地址:http://projects.spring.io/spring-clou ...