关闭

用JavaScript实现canvas和image的相互转换

标签: javascriptcanvas
221人阅读 评论(0) 收藏 举报
分类:

使用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);

    return canvas;
}

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

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

Study JavaScript《Canvas Image相互转换》

JS Canvas与Image互相转换 Convert an Image to Canvas with JavaScript To convert an image to canvas, you use a canvas element's context's drawImage ...
  • jiangdragon
  • jiangdragon
  • 2015-11-20 00:47
  • 532

Canvas与Image互相转换示例代码

JS Canvas与Image互相转换  原文演示: JavaScript Canvas Image Conversion Demo 在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2014-08-12 22:09
  • 1524

Image与Canvas相互转换

// 把image 转换为 canvas对象 function convertImageToCanvas(image) { // 创建canvas DOM元素,并设置其宽高和图片一样 var canvas = document.createElement("canvas&quo...
  • rnZuoZuo
  • rnZuoZuo
  • 2014-05-07 22:39
  • 728

canvas和image互相转换

转载:http://www.cnblogs.com/sapho/p/6143819.html1. 把img转换为canvas对象复制代码 function convertImageToCanvas(image){ //创建canvas DOM对象,并设置其宽高和图片一样 var can...
  • u013223198
  • u013223198
  • 2017-05-09 11:47
  • 378

JavaScript基础——使用Canvas绘图

HTML5添加的最受欢迎的功能就是元素。这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形。元素最早是由苹果公司推出的,当时主要用在其Dashboard中。很快,HTML5也加入了这个元素,主流浏览器开始支持它。 基本用法 要使用元素,必须先设置其wi...
  • Goskalrie
  • Goskalrie
  • 2016-08-03 10:48
  • 2335

js通过canvas实现动画效果

有个要注意的点,就是canvas标签本身自带width与height属性,设置此属性可以直接更改canvas坐标系的宽与高,而在css里设置宽高,只是把canvas坐标系拉伸了,坐标值不变,显示出来的图像也都被拉伸了。 var canvas = document.getElementB...
  • m0_37907835
  • m0_37907835
  • 2018-01-03 15:54
  • 89

详述canvas(二)/canvas绘图函数汇总

绘图路径:beginPath() :开始路径 closePath():闭合路径 moveTo(x,y):将触笔移动到x,y点 lineTo(x,y):绘制到x,y点 stroke(): 触笔方法 画线 默认为黑色 fill():填充方法 rect(x,y,w,h...
  • liuyan19891230
  • liuyan19891230
  • 2016-04-25 16:58
  • 1524

图像与视频的相互转换

图像与视频的相互转换 http://blog.csdn.net/u012062327             在做跟踪算法的测试的时候,我们往往需要用找视频,而标准库的大多数是图像,这时候我们得将图像转换为视频格式;有时候我...
  • u012062327
  • u012062327
  • 2015-04-14 18:59
  • 375

用Javascript和canvas实现的涂鸦板

javascript canvas画图实例          *{margin:0;padding:0;}  .fa{width:740px;margin:0 auto;}  .top{margin:20px 0;}...
  • mz_shenbian
  • mz_shenbian
  • 2013-03-21 19:45
  • 398

JavaScript canvas 绘制圆形时钟

canvas 绘制时钟
  • u012104947
  • u012104947
  • 2016-04-19 15:20
  • 524
    个人资料
    • 访问:17177次
    • 积分:1295
    • 等级:
    • 排名:千里之外
    • 原创:108篇
    • 转载:29篇
    • 译文:0篇
    • 评论:8条
    最新评论