/**
* 剪切图像
*/
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. 自己写js库,怎么支持AMD

    最近我打算把之前做项目写的一些工具集成到一个js库中,但是库既要在普通环境正常运行,又要在AMD环境下不暴露全局变量.一时间挺头疼的.随即我参考了一些现在流行的库的源码.学着写了一下,感觉还不错. 既 ...

  2. 12、SpringBoot------activeMq的简单使用

    开发工具:STS 前言: What is ActiveMq? ActiveMq:实现了Jms规范的一款Java 消息中间件. 消息中间件: 处理消息的一个消息机制,负责接收消息与转发. 用途: (1) ...

  3. 8、SpringBoot+Mybatis整合------参数取值方式

    前言: 我们知道,在mybatis中,参数取值方式有两种: #{ } 和 ${ } 下面,我们来探讨下#{ }与${ }不同. 一.#{ } 例: select * from student wher ...

  4. Junit 测试 @Test 红名问题

    准备测试,如上图,都是红名 Ctrl+1 或者鼠标放在@Test上 鼠标放在@Test上出现上面这种就可直接点击安装了 如果是下边这种 Test is not an annotation type,一 ...

  5. PowerDesigner生成sql脚本

    1.打开PowerDesigner->New Project; 2.填写项目名称,选择文件的存放路径: 3.新建一个模型,New Model: 4.选择概念模型,填写模型名称: 5.选择enti ...

  6. JS中常犯错误

    01.==与=== 释: 在JavaScript中使用三等号来判断两个条件是否相等.使用等于关系运算符时,只有两边的条件相等时,结果才为真,否则就是假.注意等于关系运算符并不只是判断 数字类型的数据, ...

  7. 转 Ubuntu 下 vim 搭建python 环境 配置

    1. 安装完整的vim# apt-get install vim-gnome 2. 安装ctags,ctags用于支持taglist,必需!# apt-get install ctags 3. 安装t ...

  8. LeetCode970. 强整数

    问题:970. 强整数 用户通过次数0 用户尝试次数0 通过次数0 提交次数0 题目难度Easy 给定两个非负整数 x 和 y,如果某一整数等于 x^i + y^j,其中整数 i >= 0 且  ...

  9. Python生成器、装饰器

    ## 生成器 - 生成器是用来创建Python序列的一个对象 - 通常生成器是为迭代器产生数据的 - 例如range()函数就是一个生成器 - 每次迭代生成器时,它都会记录上一次调用的位置,并返回下一 ...

  10. C语言进阶—— 单引号和双引号14

    单引号和双引号 C语言中的单引号用来表示字符字面量 C语言中的双引号用来表示字符串字面量 ‘a’表示字符字面量,在内存中占用一个字节,'a'+1表示'a'的ASCII码加1,结果为'b' " ...