简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

在HTML5 Canvas中放入图片和保存为图片的方法

来源:易贤网   阅读:6999 次  日期:2014-07-14 14:11:26

温馨提示:易贤网小编为您整理了“在HTML5 Canvas中放入图片和保存为图片的方法”,方便广大网友查阅!

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

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

更多信息请查看IT技术专栏

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:会走动的图形html5时钟示例
下一篇:HTML5中的Scoped属性使用实例
易贤网手机网站地址:在HTML5 Canvas中放入图片和保存为图片的方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!