文档章节

node与canvas保存(下载)图片

L3ve
 L3ve
发布于 2014/08/11 17:41
字数 649
阅读 3006
收藏 4

最近在做一个截图的功能,要保存成图片.

其实这个功能挺简单的,用toDataURL()转换,或者直接用使用canvas2image.jsbase64.js这两个脚本实现功能,

部分重要代码如下:

                    //简单的使用JavaScript代码实现下载
    var imageDate = document.getElementById("canvas").toDataURL("image/png");
    window.location.href = "image/octet-stream" + imageDate;
    
                    //使用强大的脚本,搜索下,不难找到这2个脚本
    var oCanvas = document.getElementById("canvas");
    Canvas2Image.saveAsPNG(oCanvas);  // 这将会提示用户保存PNG图片
    Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片
    Canvas2Image.saveAsBMP(oCanvas);  // 这将会提示用户保存BMP图片
  
  
    // 返回一个包含PNG图片的<img>元素
    var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   
    // 返回一个包含JPG图片的<img>元素
    var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 
    // 返回一个包含BMP图片的<img>元素
    var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 
    // 这些函数都可以接受高度和宽度的参数
    // 可以用来调整图片大小
    // 把画布保存成100x100的png格式
    Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

其实如果只是PNG,用原生代码就够了,当然如果你要很多功能的,那2个脚本也够你用了.

不过人生的道路不会这么顺利(每次编程都是这样,太顺利了,就一定有问题),IE报错了,我的项目其实就是基于IE的,每次运行都会爆"脚本错误——错误:传递给系统调用的数据区域太小!".这个错误的原因是Data URL协议中,图片被转换成base64编码的字符串形式的时候过长,IE就报错了.(个人找不到解决的方法,求大神告知)

无奈之下,只能通过后台node来保存图片,然后返回地址,从而到达下载的效果(node的文件API还是挺好用挺容易的).

直接上代码:

    //前端客户端代码
var imageURL = document.getElementById("canvas").toDataURL();

    $.post("/saveImage", {image: imageURL}, function (data) {
        if (data == "ok") {
            alert("成功")
        }
    })
    
    
    //node后台代码
    app.post('/saveImage', function (req, res) {
        var imgData = req.body.image,
            base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""),
            dataBuffer = new Buffer(base64Data, 'base64');
        fs.writeFile("out.png", dataBuffer, function(err) {
            if(err){
                res.send(err);
            }else{
                res.send("ok");
            }
        });
    });

这里唯一一个要注意的地方就是new Buffer接收的base64编码应该去掉"data:",比如我用canvas.toDataURL()得到的是"data:image/png;base64,aaaaaaaaaaaaaaaaaaaaa",

那么new Buffer接收的就应该是"aaaaaaaaaaaaaaaaaaaaa",

            base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""),

正是这个用途.其他的也没啥好说的.

最后吐槽下:我是前端工程师呀~~,最近咋变成个全栈工程师了,还好是node,是我喜欢的node.好吧,以后我就变成JavaScript工程师好了.








© 著作权归作者所有

L3ve
粉丝 10
博文 28
码字总数 14006
作品 0
浦东
程序员
私信 提问
ThinkJS 和 和 Sprite.js 服务端 服务端渲染实践

编者按:本文作者奇舞团前端开发工程师李冬杰,让我们一起学习吧! 介绍 ThinkJS 是一个基于 koa@2.0 的企业级服务端开发框架,本项目中除基本的 HTTP 服务外,还使用了定时任务和 websocke...

奇舞周刊
2018/10/14
0
0
前端如何优雅的制作带LOGO的二维码

说在前面的话... 最近项目有个功能产品列表,可以将不同产品生成不同的二维码,扫码可以进入对应的产品详情页,同时二维码需要带公司logo,需要可以长按调起微信的下载图片的功能,其实也就是...

Color..「Blind」
2018/07/19
0
0
一次 H5 「保存页面为图片」 的踩坑之旅

1. 需求 最近丁香医生的产品大佬又双叒叕搞事情,想要在 H5 中做一个医生邀请提问的功能,可以将医生的二维码名片分享出去,支持移动、PC 和微信。之前的图片是由后端生成的,并且会缓存三天...

丁香园F2E
2017/11/25
0
0
这应该是你见过的最全前端下载总结

frontend-download-sample 自己整理的一些项目中遇到过的关于上传和下载的一些Demo,大前端系列(也就是纯前端 + node端完成的下载,只要获取到数据下载工作全是前端来做),仅供给位看官参考...

luffyZhou
01/18
0
0
来~打包实现小程序动态分享图一条龙服务( ¨̮ )

前一阵有完成在小程序内动态生成图片再进行分享的需求,是很常见的场景,因此我抽出了一个小工具CanvasPainter.js,囊括在小程序内canvas画图基本需求: 用配置形式绘图(暂支持单行及多行文本...

DearVikki
2018/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty整合Protobuffer

现在我们都知道,rpc的三要素:IO模型,线程模型,然后就是数据交互模型,即我们说的序列化和反序列化,现在我们来看一下压缩比率最大的二进制序列化方式——Protobuffer,而且该方式是可以跨...

算法之名
30分钟前
16
0
如何用C++实现栈

栈的定义 栈(stack)又名堆栈,它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶,相对地,把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压...

BWH_Steven
49分钟前
5
0
编程作业20190210900169

1编写一个程序,提示用户输入名和姓,然后以“名,姓”的格式打印出来。 #include <stdio.h>#include <stdlib.h> int main(){ char firstName[20]; char lastName[20]; print......

1李嘉焘1
今天
12
0
补码的优点及原理分析

只讨论整数 1.计算机内部为什么没有减法器? 减法运算本身其实就是加法,如x - y即x +(-y),所以只需要将负数成功表示出来并可以参加加法运算,那加法器就可同时实现“+”和“-”的运算。这...

清自以敬
今天
76
0
Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部