原文:http://www.jb51.net/html5/160920.html

这么神奇么?先记录一下。

使用JavaScript将图片拷贝进画布

要想将图片放入画布里,我们使用canvas元素的drawImage方法:

复制代码

代码如下:

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);</p>
<p> return canvas;
}

这里的0, 0参数画布上的坐标点,图片将会拷贝到这个地方。

用JavaScript将画布保存成图片格式

如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:

复制代码

代码如下:

// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}

这段代码就能神奇的将canvas转变成PNG格式!

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. new usercontrol

    http://www.codeproject.com/Articles/12421/The-Grouper-A-Custom-Groupbox-Control

  2. DataGridView中DataGridViewComboBoxColumn的一些相关应用(一)让其值改变时触发事件-转

    转自  https://maodaili.de/mao.php?u=a%2FMrbEvUE8PnCuc7FrhJi0Rqd3kmOBHPZUbcJ1c2hbJUK0RYWpAf4lhIOddItP%2 ...

  3. 【Linux 进程】fork父子进程间共享数据分析

    之前我们通过fork()函数,得知了父子进程之间的存在着代码的拷贝,且父子进程都相互独立执行,那么父子进程是否共享同一段数据,即是否存在着数据共享.接下来我们就来分析分析父子进程是否存在着数据共享. ...

  4. Compile、Make和Build的区别

    针对Java的开发工具,一般都有Compile.Make和Build三个菜单项,完成的功能的都差不多,但是又有区别.   编译,是将源代码转换为可执行代码的过程.编译需要指定源文件和编译输出的文件路径 ...

  5. java_15 System类

    1.System类 2.System类方法 (1)currentTimeMillis() public static void main(String[] args) { long start = S ...

  6. java_3选择与循环

    1.三种执行顺序(流程控制语句) 在Java中,有三种执行结构,第一种:顺序结构.第二种:循环结构.第三种:选择结构. 2.顺序结构 自上而下,顺序执行. 3.循环结构 (1)while语句 初始化表 ...

  7. Java08-java语法基础(七)构造方法

    Java08-java语法基础(七)构造方法 一.构造方法 1.什么是构造方法? 构造方法(类方法)是一个方法名和类名相容的特殊的成员方法. 2.构造方法的作用? 当使用new关键字创建一个对象时,为 ...

  8. check-versions.js和dev-client.js

    // 用于在控制台输出带颜色字体的插件var chalk = require('chalk') // 语义化版本检查插件(The semantic version parser used by npm ...

  9. YII2中使用控制台命令

    有些时候我们需要通过crontab在后台跑一些定时脚本,这时候就需要用到控制台命令了. 我们在commands目录下创建TestController.php,当然脚本的位置是可以随意指定的,只需要在c ...

  10. svn-经常遇到问题解答办法积累(一)

    1.对于一个SVN使用新手,第一步,肯定是如何获取代码到本地指定的目录. 步骤: (1)新建一个存放svn中某一个代码库的目录,加入该目录命名为:Proj1SVN (2)右键鼠标,选择SVN Chec ...