手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >在HTML5 Canvas中放入图片和保存为图片的方法
在HTML5 Canvas中放入图片和保存为图片的方法
摘要:使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawImage方法://Convertsimag...

使用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格式!

这些在图片和画布之间转换的技术可能比你想象的要简单的多哦。

【在HTML5 Canvas中放入图片和保存为图片的方法】相关文章:

HTML5 Canvas之测试浏览器是否支持Canvas的方法

HTML5 canvas画图并保存成图片的jcanvas插件

HTML5中标签的定义和用法

html5 worker 实例(二) 图片变换效果

实例讲解使用HTML5 Canvas绘制阴影效果的方法

基于HTML5 Canvas:字符串,路径,背景,图片的详解

HTML5 Canvas——用路径描画线条实例介绍

使用HTML5做个画图板的方法介绍

HTML5 Canvas渐进填充与透明实现图像的Mask效果

HTML 5 中 标签的定义和用法

精品推荐
分类导航