/**
* 剪切图像
*/
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. tomcat7 的The Apache Tomcat Native library which allows optimal performance 的解决

    1.        用Myeclipse启动tomcat7启动时可能会收到下面的信息: 七月 24, 2014 10:13:30 上午 org.apache.catalina.core.AprLife ...

  2. C# 驱动的mongodb的分页查询简单示例

    /// <summary> /// mongodb分页查询 /// </summary> /// <typeparam name="T">< ...

  3. C#封装cef图片title不显示

    遇到Web项目在浏览器调试时tip能正常显示,在cef环境下居然没有提示.根据网上的的资料添加app.manifest文件. 并且放开这一段代码.重新编译后能够显示出tip.

  4. pdo->prepare 返回false的问题总结

    报错信息: Fatal error: Call to a member function execute() on a non-object 一般是pdo->prepare 返回了false导致 ...

  5. BZOJ2683: 简单题(cdq分治 树状数组)

    Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 2142  Solved: 874[Submit][Status][Discuss] Descripti ...

  6. java的八种基本数据类型

             据说表格的方式一目了然 一. java数据类型的取值范围如下: 注意:long型后如果不加 L 则默认为int型,float型如果不加 F 则默认为double型: 注意!注意!注意 ...

  7. linux下,把屏幕竖起来

    xrandr -o left 向左旋转90度 xrandr -o right 向右旋转90度 xrandr -o inverted 上下翻转 xrandr -o normal 回到正常角度

  8. 学习python第十四天,模块

    Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 模块让你能够有逻辑地组织你的 Python 代码段. 把相关的代码 ...

  9. Makefile (2) gdb

    gdb调试 1.用debug的方式编译 -g 2.打上断点 3.单步调试 step into 进入函数里面 step over 运行整个函数 step return 跳出当前函数 4.继续运行 5.打 ...

  10. struts2官方 中文教程 系列三:使用struts2 标签 tag

    避免被爬,先贴上本帖地址:struts2 官方系列教程一:使用struts2 标签 tag http://www.cnblogs.com/linghaoxinpian/p/6901316.html 本 ...