/**
* 剪切图像
*/
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. iOS开发:小技巧积累

    1.获取全局的Delegate对象,这样我们可以调用这个对象里的方法和变量: [(MyAppDelegate*)[[UIApplication sharedApplication] delegate] ...

  2. 木棒,POJ(1011)

    题目链接:http://poj.org/problem?id=1011 解题报告: #include <cstdio> #include <cstring> #include ...

  3. atoi简析

    原文链接 atoi()函数的功能:将字符串转换成整型数:atoi()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正负号才开始做转换,而再遇到非数字或字符串时('\0')才结束转化,并将 ...

  4. C# as运算符

    一.C# as运算符 as运算符用于执行引用类型的显式类型转换.请阅读C#数据类型. as运算符可以用下面的格式表示: expression as type?expression:引用类型的表达式. ...

  5. SqlServer和Oracle修改表结构语句

    SQL Server:1.增加列  ALTER TABLE users ADD address varchar(30);2.删除列  ALTER TABLE users DROP COLUMN add ...

  6. JavaScript中并非一切皆对象

    对象是js中的基础以及核心,在js中有六种主要类型:string  number  boolean null undefined object 除了oject类型以为其他五种本身并非对象,null本身 ...

  7. BZOJ3170: [Tjoi2013]松鼠聚会(切比雪夫距离转曼哈顿距离)

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1524  Solved: 803[Submit][Status][Discuss] Descripti ...

  8. JS - 简单的下载图片至本地

    <iframe id="saveImg" src="图片路径" style="display:none;"></ifram ...

  9. mongodb多个查询语句

    db.getCollection('costitems').find({"created":{"$gte":ISODate("2019-01-02T0 ...

  10. html中table,tr,td

    table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...