/**
* 剪切图像
*/
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. 如果有反向代理的情况下,获取最原始的IP的办法

    HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_HOST"];

  2. [论文理解]关于ResNet的进一步理解

    [论文理解]关于ResNet的理解 这两天回忆起resnet,感觉残差结构还是不怎么理解(可能当时理解了,时间长了忘了吧),重新梳理一下两点,关于resnet结构的思考. 要解决什么问题 论文的一大贡 ...

  3. openstack kilo python cinderclient

    ➜  ~ pythonPython 2.7.5 (default, Oct 30 2018, 23:45:53) [GCC 4.8.5 20150623 (Red Hat 4.8.5-36)] on ...

  4. 【洛谷P1962】斐波那契数列

    斐波那契数列 题目链接:https://www.luogu.org/problemnew/show/P1962 矩阵A 1,1 1,0 用A^k即可求出feb(k). 矩阵快速幂 #include&l ...

  5. ES6 初体验 —— gulp+Babel 搭建ES6环境

    ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...

  6. python中的反斜杠问题

    python本身使用 \ 来转义一些特殊字符,比如在字符串中加入引号的时候 s = 'i\'m superman' print(s) # i'm superman 为了防止和字符串本身的引号冲突,使用 ...

  7. 前端JavaScript之DOM使用案例

    1.弹出框点击关闭 (这个例子关键自己创建标签以及属性,不是太好想啊,而且作用相对来数也不是太大) <!DOCTYPE html> <html> <head> &l ...

  8. Ubuntu 16.04安装docker(2018年最新)

    参考https://blog.csdn.net/bingzhongdehuoyan/article/details/79411479 http://www.cnblogs.com/lighten/p/ ...

  9. EBS补丁时遇到的问题

    今天在给R12.1.3打17525552的时候,出现了这样的一个错误 ATTENTION: All workers either have failed or are waiting: FAILED: ...

  10. Linux文件系统与目录结构

    在Linux系统中,目录被组织成一个:单根倒置树结构,文件系统从根目录开始,用/来表示.文件名称区分大小写( 大小写敏感还需要看具体的文件系统格式 ),以.开头的为隐藏文件,路径用/来进行分割(win ...