/**
* 剪切图像
*/
function initDemo8(){
var canvas = document.getElementById("demo8");
if (!canvas) return;
var context = canvas.getContext("2d");
var img = new Image();
img.src = "images/timg3.jpg";
img.onload = function () {
context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 50);
context.lineTo(150, 150);
context.lineTo(50, 150);
context.lineTo(50, 50);
context.closePath();
context.clip();
context.drawImage(img, 0, 0, 350, 350);
};
}

Canvas 剪切图片的更多相关文章

  1. canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  2. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  3. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  4. 使用canvas进行图片裁剪简单功能

    1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

  5. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  6. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  7. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  8. canvas转图片

    <script>   var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100;       window.onload ...

  9. canvas和图片之间的互相装换

    canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...

随机推荐

  1. MSD_radix_sort

    一.这次是在上一次尝试基础上进行的,预期是达到上次性能的9倍. MSD的基本手法就是不断切片.每一步都是把整体数据切割成256片,如上图所示,实际情况切片未必均匀,有的slice内可能一个元素也没有. ...

  2. IOS 封装View的fram(X Y W H )

    @interface UIView (Extension) @property (nonatomic, assign) CGFloat x; @property (nonatomic, assign) ...

  3. ABI and ISA

    ABI定义了如何使用ISA. ISA定义了机器码的使用规则. http://www.delorie.com/gnu/docs/gmp/gmp_6.html ABI and ISA ABI (Appli ...

  4. Rich feature hierarchies for accurate object detection and semantic segmentation(RCNN)

    https://zhuanlan.zhihu.com/p/23006190?refer=xiaoleimlnote http://blog.csdn.net/bea_tree/article/deta ...

  5. spring boot1.5.6 测试类1

    package com.example.demo; import org.junit.Before;import org.junit.Test; import org.junit.runner.Run ...

  6. vue 城市搜索组件

    1.实现大致是如下效果 2.搜索组件的页面结构 <template>    <div>     <div class="search">     ...

  7. python之字典的书写

    python之字典 1.字典的说明定义:字典是另一种可变容器模型,且可存储任意类型对象,他是由key:value键值对组成的. 2.字典的代码2.1.字典的定义 >>> a = di ...

  8. linux中安装JDK linux中安装Tomcat linux中安装Mysql 及故障解析 linux系统安装redis

    Linux 安装JDK 配置完环境变量后无法使用 java -version 无法打开 通过下面语句 将32位文件与当前系统64位兼容 (有待补充32位查法)sudo yum install glib ...

  9. Windosw系统——常见的问题

    1. 写在某些软件后就无法打开网页,但可以上QQ. 在卸载了一些VPN或USB无线设备后,发现自己网页打不开,但是ping能ping通,也可以登录QQ. 解决办法: (1): 开始运行——regedi ...

  10. 返回固定页面的web服务器

    import socket def handle_client(socket_con): """ 接收来自客户端的请求,并接收请求报文,解析,返回 "" ...