用JavaScript将Canvas内容转化成图片的方法
上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用。有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它。我们也想有100万美元装到口袋里,我决定开发一个Instagram风格的应用,这篇文章了我将介绍一下如何将一张图片拷贝到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); 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格式!
这些在图片和画布之间转换的技术可能比你想象的要简单的多。在以后的文章里,我会写一些将这些图片做不同滤镜处理的技术。
转载自 webhek
用JavaScript将Canvas内容转化成图片的方法的更多相关文章
- 将canvas画布内容转化为图片(toDataURL(),创建url)
将canvas画布内容转化为图片(toDataURL(),创建url) 总结 1.现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片 2.在代码里面可以通过toDataURL() ...
- html dom 转化成图片踩坑记(canvas toDataURL)
需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...
- C# 将容器内容转成图片导出
/// 将容器内容转成图片导出,这里的controller就是this /// </summary> private void OutTheContro ...
- 在linux环境下使用icepdf或pdfbox将pdf转化成图片是乱码解决
在linux环境下使用icepdf或pdfbox将pdf转化成图片是出现乱码,网上查发下是itextpdf生成pdf引用"STSong-Light"字体而linux环境下没有这个字 ...
- base64字符串转化成图片
package com.dhht.wechat.util; import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder; import ja ...
- Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
由于客户的需求,将js写出来的一个统计能够保存到本地.作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js.功能是可以实现,但是有缺陷.话不多说开始搞! 1.引入几个JS库 ①:jq ...
- hml页面转化成图片
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
- IOS-将长文字转化成图片方法
我们在看微博时,会看到一些长图片上的显示文章,现在就介绍下如何实现.分析下还是很简单的,总结如下:1.计算文字区域的高 2.利用UIGraphics图形上下文方法来实现 3.验证方法:UIImageW ...
- js Base64 转化成图片格式
function dataURLtoFile(dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[0]. ...
随机推荐
- css 实现进度条
<select id="progress" onchange="changeProgress(this)"> <option value=&q ...
- jquery.ajax和Ajax 获取数据
前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...
- 数字转化为人民币大写(PHP)
<?php function numTrmb($num) { $d = array("零", "壹", "贰", "叁&qu ...
- 图片ppm编码格式
ppm图片有2种格式, ASCII格式和binary格式. (1)ppm头部分 由三部分组成,这三部分由回车或换行分割,但PPM的标准中是要求空格. 第一行通常是P3或P6,说明是PPM格式: 第二行 ...
- [Head First Python]4. summary
1- strip()方法可以从字符串去除不想要的空白符 (role, line_spoken) = each_line.split(":", 1) line_spoken = li ...
- ubuntu 中c 语言编程(学习)
ubuntu下c编程 c编程中相关文件后缀 .a 静态库(archive .c C源代码(需要编译预处理) .h C源代码头文件 .i C源代码 (不需要编译预处理) ...
- Qt学习(四)—实例涂鸦画板mspaint
一.Qt图形绘制 自己在Qt开源社区在自学yafeilinux前辈的<Qt快速入门系列教程>中的图形篇,结合所学的知识,可以做一个涂鸦板实例 二.实现涂鸦板 1.新建工程mspaint, ...
- windows 7 系统进程服务详解
windows 7已经发布有段时间了,相信很多网友都已经换上了传说中非常完美的win7系统.win7不仅继承而且还超越了vista的美观界面,性能优化方面也下足了功力.还拥有强大的win xp兼容性, ...
- Google API v3 设置Icon问题处理
1.查看API实现 //虽然比较符合API实现的思想但这个没法; //会产生Uncaught TypeError: undefined is not a function //google API n ...
- 基于MFC与第三方类CWebPage的百度地图API开发范例
在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...