/**
* 剪切图像
*/
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. 两次DFS,POJ(1481)

    题目链接:http://poj.org/problem?id=1481 两次DFS,这里的思路是,没找到*,就说明,有一个骰子,因此,每搜索到一个*,深搜4个方向,并且变为'.',要是搜到'X',就是 ...

  2. ceph-块存储客户端

    ceph块存储 ceph块设备,以前称为RADOS块设备,为客户机提供可靠性.分布式和高性能的块存储磁盘.RADOS块设备利用librbd库并以顺序的形式在ceph集群的多个osd上存储数据块.RBD ...

  3. P1903 数颜色

    题目 带修莫队题. 在询问上多加一个变量,记录是在那次修改之后的. 然后暴力修改. 就没了. 不过有一些修改的小技巧 #include<cstdio> #include<algori ...

  4. cudaMemcpy2D

  5. JavaEE权限管理系统的搭建(二)--------聚合工程项目的创建和依赖关系

    本项目是一个聚合工程,所以要先搭建一个聚合工程的框架 搭建完成的项目结构图如下: 首先创建父项目:pom类型 子模块:web层的搭建,war类型 把这个两个目录标记为对应的类型 其他子模块:和serv ...

  6. 改Chrome的User Agent,移动版网络

    理论上访问手机版或者iPad等平板电脑版的网络,应该可以剩些流量的,毕竟移动网络是经过优化压缩的,但是PC电脑如果访问移动版的网站呢?我主要使用的浏览器是Chrome,这几天也找了下Chrome下的修 ...

  7. matlab vs联调

    vs 和matlab联调,最近真的把我搞挂了要. 首先,怎么进入联调呢.在vs里先设置一下. vs:tools->attach to process,选择matlab,注意此时matlab一定是 ...

  8. css3 子元素的的应用 注意点

    已经第二次犯错误,不允许有下次 <ul class="ul"> <li> <a>哈哈</a> </li> <li& ...

  9. 键盘遮挡控件(textfield/textview.......)

    采用的是通知的常规方式 // 解决键盘遮挡问题//选择didShow是因为需要键盘的高度//选择willHide是因为视图frame重置需要优先于键盘消失,否则表现得不连贯 [[NSNotificat ...

  10. ES6初识-Proxy和Reflect

    { let obj={ time:'2017-03-11', name:'net', _r:123 };   let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get( ...