/**
* 剪切图像
*/
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. .net core 2.0 WIndows IIS下发布(WIN 10环境)

    最近在做练习,发布.net core webapi在本机IIS上,使用.net core的文件系统发布到IIS后,出现错误 500.19 观察了下页面如下 查阅资料才知道是少安装了一个DotNetCo ...

  2. Ajax(一):XHR的用法

    AJAX能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验. 1.在使用xhr对象时,要调用都第一个方法就是open(),它接收3个参数:要发送的请求的类型(get,post等).请求的u ...

  3. BZOJ 3227: [Sdoi2008]红黑树(tree)

    BZOJ 3227: [Sdoi2008]红黑树(tree) 标签(空格分隔): OI-BZOJ OI-其它 Time Limit: 10 Sec Memory Limit: 128 MB Descr ...

  4. caffe RandomHue和RandomSaturation

    https://www.cnblogs.com/wangyblzu/p/5710715.html HSV和RGB一样是一种图像的颜色模型,h表示色调,s表示饱和度 1.RandomHue void R ...

  5. OpenFire通过User Service管理用户

    安装OpenFire服务器略去 1.安装User Service插件: 在管理控制平台找到选项卡“插件”,里边有我们需要安装的一个User Service插件,如果安装过了会显示已经安装的哪些插件,没 ...

  6. C# continue语句

    一.C# continue语句 continue语句在循环体中结束本次循环,而重新开始下一次循环. 语法格式如下: continue;二.示例   using System;using System. ...

  7. rbg的代码

    不得不赞rbg的代码,写的是真的好,各种异常都考虑到了,至少常见的异常没有了. 还有selective search的代码,也是很赞. 而edgebox的代码则不行啊,demo写的太死,而且代码里只能 ...

  8. 11、SpringBoot------定时任务

      开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/Springboot/tree/52ef6c0c805913db1e66ed18671c322e ...

  9. 关于event loop

    之前写了篇文章 JS运行机制,里面对event loop简单的说明,面试时又遇到了关于该知识点的题目(主要是process.nextTick和setImmediate的执行顺序不太知道,查了之后才知道 ...

  10. JAVAOOP接口

    狭义接口:用来约束实现类中方法的长相的. 广义接口:已将编写好的功能. 1.接口中的方法都是抽象方法,没有方法体,必须被子类重写 2.java的接口变量都是静态常量 3.接口方法只不过是用来约束现实类 ...