canvas保存为data:image功能扩展实现

最新推荐文章于 2023-05-22 08:21:13 发布
最新推荐文章于 2023-05-22 08:21:13 发布
阅读量1.3k 收藏
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tqy19921202/article/details/80853602
版权
【已知】

canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。

【想要的】
往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，我不想新开一个tab，然后还要右键另存为...

我还需要更方便的自由的配置生成的图片的大小，比例等。

另外如果我还要别的图片格式，比如位图bmp，gif等怎么办...

【解决办法】
a)想直接把图片生成后download到本地，其实办法也很简单。直接改图片的mimeType，强制改成steam流类型的。比如‘image/octet-stream’，浏览器就会自动帮我们另存为.. 

b)图片大小，及比例的可控倒也好办，我们新建一个我们想要大小的canvas，把之前的canvas画布重新按照所要的比例，及大小draw到新的canvas上，然后用新的canvas来toDataURL即可。

c)想要bmp位图会麻烦些... 没有直接的接口，需要我们自己来生成。生成图片的响应头和响应体有一定的规则，略显麻烦。不过还能接受。剩下的就是性能问题，按像素级别来操作，对于一个大图来说计算量很有压力。

代码：

/**
 * covert canvas to image
 * and save the image file
 */


var Canvas2Image = function () {


    // check if support sth.
    var $support = function () {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');


        return {
            canvas: !!ctx,
            imageData: !!ctx.getImageData,
            dataURL: !!canvas.toDataURL,
            btoa: !!window.btoa
        };
    }();


    var downloadMime = 'image/octet-stream';


    function scaleCanvas (canvas, width, height) {
        var w = canvas.width,
            h = canvas.height;
        if (width == undefined) {
            width = w;
        }
        if (height == undefined) {
            height = h;
        }


        var retCanvas = document.createElement('canvas');
        var retCtx = retCanvas.getContext('2d');
        retCanvas.width = width;
        retCanvas.height = height;
        retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
        return retCanvas;
    }


    function getDataURL (canvas, type, width, height) {
        canvas = scaleCanvas(canvas, width, height);
        return canvas.toDataURL(type);
    }


    function saveFile (strData) {
        document.location.href = strData;
    }


    function genImage(strData) {
        var img = document.createElement('img');
        img.src = strData;
        return img;
    }
    function fixType (type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    }
    function encodeData (data) {
        if (!window.btoa) { throw 'btoa undefined' }
        var str = '';
        if (typeof data == 'string') {
            str = data;
        } else {
            for (var i = 0; i < data.length; i ++) {
                str += String.fromCharCode(data[i]);
            }
        }


        return btoa(str);
    }
    function getImageData (canvas) {
        var w = canvas.width,
            h = canvas.height;
        return canvas.getContext('2d').getImageData(0, 0, w, h);
    }
    function makeURI (strData, type) {
        return 'data:' + type + ';base64,' + strData;
    }




    /**
     * create bitmap image
     * 按照规则生成图片响应头和响应体
     */
    var genBitmapImage = function (data) {
        var imgHeader = [],
            imgInfoHeader = [];
        
        var width = data.width,
            height = data.height;


        imgHeader.push(0x42); // 66 -> B
        imgHeader.push(0x4d); // 77 -> M


        var fsize = width * height * 3 + 54; // header size:54 bytes
        imgHeader.push(fsize % 256); // r
        fsize = Math.floor(fsize / 256);
        imgHeader.push(fsize % 256); // g
        fsize = Math.floor(fsize / 256);
        imgHeader.push(fsize % 256); // b
        fsize = Math.floor(fsize / 256);
        imgHeader.push(fsize % 256); // a


        imgHeader.push(0);
        imgHeader.push(0);
        imgHeader.push(0);
        imgHeader.push(0);


        imgHeader.push(54); // offset -> 6
        imgHeader.push(0);
        imgHeader.push(0);
        imgHeader.push(0);


        // info header
        imgInfoHeader.push(40); // info header size
        imgInfoHeader.push(0);
        imgInfoHeader.push(0);
        imgInfoHeader.push(0);


        // 横向info
        var _width = width;
        imgInfoHeader.push(_width % 256);
        _width = Math.floor(_width / 256);
        imgInfoHeader.push(_width % 256);
        _width = Math.floor(_width / 256);
        imgInfoHeader.push(_width % 256);
        _width = Math.floor(_width / 256);
        imgInfoHeader.push(_width % 256);


        // 纵向info
        var _height = height;
        imgInfoHeader.push(_height % 256);
        _height = Math.floor(_height / 256);
        imgInfoHeader.push(_height % 256);
        _height = Math.floor(_height / 256);
        imgInfoHeader.push(_height % 256);
        _height = Math.floor(_height / 256);
        imgInfoHeader.push(_height % 256);


        imgInfoHeader.push(1);
        imgInfoHeader.push(0);
        imgInfoHeader.push(24); // 24位bitmap
        imgInfoHeader.push(0);


        // no compression
        imgInfoHeader.push(0);
        imgInfoHeader.push(0);
        imgInfoHeader.push(0);
        imgInfoHeader.push(0);


        // pixel data
        var dataSize = width * height * 3;
        imgInfoHeader.push(dataSize % 256);
        dataSize = Math.floor(dataSize / 256);
        imgInfoHeader.push(dataSize % 256);
        dataSize = Math.floor(dataSize / 256);
        imgInfoHeader.push(dataSize % 256);
        dataSize = Math.floor(dataSize / 256);
        imgInfoHeader.push(dataSize % 256);


        // blank space
        for (var i = 0; i < 16; i ++) {
            imgInfoHeader.push(0);
        }


        var padding = (4 - ((width * 3) % 4)) % 4;
        var imgData = data.data;
        var strPixelData = '';
        var y = height;
        do {
            var offsetY = width * (y - 1) * 4;
            var strPixelRow = '';
            for (var x = 0; x < width; x ++) {
                var offsetX = 4 * x;
                strPixelRow += String.fromCharCode(imgData[offsetY + offsetX + 2]);
                strPixelRow += String.fromCharCode(imgData[offsetY + offsetX + 1]);
                strPixelRow += String.fromCharCode(imgData[offsetY + offsetX]);
            }
            for (var n = 0; n < padding; n ++) {
                strPixelRow += String.fromCharCode(0);
            }


            strPixelData += strPixelRow;
        } while(-- y);


        return (encodeData(imgHeader.concat(imgInfoHeader)) + encodeData(strPixelData));


    };


    /**
     * saveAsImage
     * @param canvasElement
     * @param {String} image type
     * @param {Number} [optional] png width
     * @param {Number} [optional] png height
     */
    var saveAsImage = function (canvas, width, height, type) {
        if ($support.canvas && $support.dataURL) {
            if (type == undefined) { type = 'png'; }
            type = fixType(type);
            if (/bmp/.test(type)) {
                var data = getImageData(scaleCanvas(canvas, width, height));
                var strData = genBitmapImage(data);
                saveFile(makeURI(strData, downloadMime));
            } else {
                var strData = getDataURL(canvas, type, width, height);
                saveFile(strData.replace(type, downloadMime));
            }
        
        }
    }


    var convertToImage = function (canvas, width, height, type) {
        if ($support.canvas && $support.dataURL) {
            if (type == undefined) { type = 'png'; }
            type = fixType(type);


            if (/bmp/.test(type)) {
                var data = getImageData(scaleCanvas(canvas, width, height));
                var strData = genBitmapImage(data);
                return genImage(makeURI(strData, 'image/bmp'));
            } else {
                var strData = getDataURL(canvas, type, width, height);
                return genImage(strData);
            }
        }
    }






    return {
        saveAsImage: saveAsImage,
        saveAsPNG: function (canvas, width, height) {
            return saveAsImage(canvas, width, height, 'png');
        },
        saveAsJPEG: function (canvas, width, height) {
            return saveAsImage(canvas, width, height, 'jpeg');            
        },
        saveAsGIF: function (canvas, width, height) {
            return saveAsImage(canvas, width, height, 'gif')           
        },
        saveAsBMP: function (canvas, width, height) {
            return saveAsImage(canvas, width, height, 'bmp');           
        },
        
        convertToImage: convertToImage,
        convertToPNG: function (canvas, width, height) {
            return convertToImage(canvas, width, height, 'png');
        },
        convertToJPEG: function (canvas, width, height) {
            return convertToImage(canvas, width, height, 'jpeg');               
        },
        convertToGIF: function (canvas, width, height) {
            return convertToImage(canvas, width, height, 'gif');              
        },
        convertToBMP: function (canvas, width, height) {
            return convertToImage(canvas, width, height, 'bmp');              
        }
    };

}();

cocos creator 中的截屏实现：

captureScreen: function () {

//注意，EditBox，VideoPlayer，Webview 等控件无法被包含在截图里面

//因为这是 OpenGL 的渲染到纹理的功能，上面提到的控件不是由引擎绘制的

if(CC_JSB) {

//如果待截图的场景中含有 mask，请使用下面注释的语句来创建 renderTexture

// var renderTexture = cc.RenderTexture.create(1280,640, cc.Texture2D.PIXEL_FORMAT_RGBA8888,

            gl.DEPTH24_STENCIL8_OES);

    var renderTexture = cc.RenderTexture.create(1280,640);

   //实际截屏的代码

            renderTexture.begin();

         //this.richText.node 是我们要截图的节点，如果要截整个屏幕，可以把 this.richText 换成 Canvas 切点即可

    this.richText.node._sgNode.visit();

    renderTexture.end();

            renderTexture.saveToFile("demo.png",cc.ImageFormat.PNG, true, function () {

cc.log("capture screen successfully!");

     });

      //打印截图路径

            cc.log(jsb.fileUtils.getWritablePath());

         }

            }


妖妖天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【基础知识】HTML5 Canvas getImageData()和 putImageData() 在Canvas中绘制表面的保存与恢复(应用场景)
苏一恒
08-20 1453
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 应用场景 在需要对画布内进行鼠标的细致操作时，需要用辅助线： 1、鼠标进入画布时，先用getImageData()保存之前的ca...
canvas保存为data:image扩展功能的实现
weixin_34217773的博客
01-14 105
【已知】canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。 【想要的】往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，我不想新开一个tab，然后还要右键另存为... 我还需要更方便的自由的配置生成的图片的大小，比例...
用canvas的toDataURL将图片转化为dataURL（base64）
yanyongtao1的博客
03-06 5627
dataURL：先大致回顾一下正统的dataURL语法，这有助于我们检验转换后的内容是否正确。一个完整的dataURL应该是这样的data:[&lt;mediatype&gt;][;base64],&lt;data&gt;其中mediatype声明了文件类型，遵循MIME规则，如“img/png”、"text/plain"；，之后是编码类型，这里我们只涉及base64；紧接着就是文件编码后的内容了...
php data image保存图片,php 接收上传的data:image/png;base64图片数据，并存储
weixin_35794072的博客
03-16 1803
前端上传图片发送过来的图片数后台接收处理方法/**base64图片上传*$base64_image_contentstring图片base64数据*$path图处存储地址，从网站根路径开如*returnstring图片地址*/privatefunctionbase64Img($base64_image_content,$path){//匹配出图片的格式if(preg_m...
data:image/jpeg;base64 数据流处理，保存至oss
Cpath的博客
04-15 1万+
$img_content = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEB
canvas2image.zip
10-23
总的来说，canvas2image.js是Web开发中一个实用的工具，它扩展了canvas的功能，使开发者能够轻松地将动态图形保存为静态图像，提升了用户体验。结合indexss.js文件，可能是提供了一些示例代码或额外的功能，使得在...
canvas 涂鸦 保存 预览 下载
11-17
5. **保存功能**： - 保存Canvas内容为图片，可以利用`toDataURL`方法，它会返回一个包含当前画布内容的data URL。 - 将这个URL转换为Blob对象，再使用FileSaver.js等库实现本地下载，或者通过Ajax发送到服务器...
使用canvas实现图片马赛克
07-27
以下我们将详细讲解如何使用canvas和JavaScript来实现这一功能。 首先，我们需要创建一个canvas元素，并将待处理的图片加载到canvas的上下文环境中。在JavaScript中，我们可以使用`<canvas>`的`getContext()`方法...
canvas电子签名，支持保存签名图片
04-26
本主题聚焦于使用canvas技术实现电子签名并将其保存为图片的功能。Canvas是HTML5提供的一种强大的图形绘制工具，它允许开发者通过JavaScript在网页上进行动态图形编程。以下是对这个知识点的详细阐述： 首先，我们...
canvas2image：用于将画布保存或转换为img的工具
02-20
画布2图像 将画布保存或转换为图像的工具 演示版 代码 你可以像这样使用它 Canvas2Image.saveAsImage(canvasObj, width, height, type) Canvas2Image.saveAsPNG(canvasObj, width, height) Canvas2Image.saveAsJPEG(canvasObj, width, height) Canvas2Image.saveAsGIF(canvasObj, width, height) Canvas2Image.saveAsBMP(canvasObj, width, height) Canvas2Image.convertToImage(canvasObj, width, height, type) Canvas2Image.convertToPNG(canvasObj, width, heig
Canvas输出图片并保存到本地
你的目光温柔如水的博客
08-23 8431
之前做手写识别的比赛，对于画板canvas写出的数字，要生成图片保存到本地，然后调用python进行识别。对图片保存经历了三个版本变更。 一、直接对屏幕进行截屏保存图片 仅停留在可以实现生成图片，图片的画质还有截取的位置都有很大的问题 Robot robot; try { robot = new Robot(); //进行屏幕截取，根据不同电脑的分辨率设置参数 Buffere...
将 Canvas 保存为图片并下载至本地
高先生的猫
04-30 6132
在实际开发过程中，有时需要将图表或者地图等基于Canvas技术渲染的数据下载到本地保存到情况，下面介绍两种方法来完成这种功能。 一、a 标签法 a 标签方法主要分为以下步骤： 将 canvas 元素的数据通过原生 api 转换成 base64 编码的图片格式 利用 a 标签设置 download 属性可以将 href 链接元素下载，我们将 a 标签的 href 属性值设置为上一步获得的 b...
DataURL入门,图片储存在数据库字段中
苏凯的博客
02-01 1240
                                               DataURL入门 DataURL概述 所谓DataURL是指"data"类型的Url格式，是在RFC2397中提出的，目的是对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入   Data URL入门   完整的DataURL语法：DataURL=  data:mediatyp...
如何将图片以Image类型存储到数据库 如何从数据库中读取Image类型的字段
dz45693的专栏
11-10 6985
 将图片以Image类型存储到数据库中，首先获取图片的流对象，然后，利通Read方法从图片文件读取二进制数据存储到字节数组。从数据库中读取Image类型的字段，首先将数据库对应的Image类型字段存储在无符号直接数组，然后再用MemoryStream类读入图片数据，通过MemoryStream对象生成Bitmap对象，显示在PictureBox控件上。代码如下:   private voi
Android canvas.save()与canvas.restore()的使用总结
Nothing
10-10 1万+
含义 canvas.save(); 画布将当前的状态保存 canvas.restore(); 画布取出原来所保存的状态 使用 canvas.save();与canvas.restore();一般结合使用，.save()函数在前，.restore()函数在后，用来保证在这两个函数之间所做的操作不会对原来在canvas上所画图形产生影响。比如下面这张图： 蓝色方块里面有三张图，两张正常画，一张倾斜4...
Canvas基本图片操作与处理
高先生的猫
07-20 1193
前言 Canvas是H5中新增的技术，主要运用在图片的处理和动画的绘制上，随着Canvas的使用场景越来越多，了解Canvas对平时开发大有裨益，这篇文章将介绍Canvas基本图片操作与处理 图片上传与绘制 将图片上传并绘制到Canva中是最常见的Canvas的图片处理，这个上传与绘制的过程是怎么实现的呢？下面举个例子： <canvas id="myCanvas"></canvas> <input type="file" id="file"> let .
Canvas图像与视频基础,离屏19
最新发布
编程是一门实践技术
05-22 627
-2--图像的绘制存在安全问题，默认的情况下允许绘制不属于自己域的图像，但不能通过Canvas API保存或修改其它域中的图像。--3--在使用这些API时性能也是一个需要关注的方面，不同的编码其效率不太一样，有一个大致的参考网站:【http://jsperf.com】chrome:在命令行中指定：'--allow-file-access-from-files'参数来启动浏览器；--1--有时两个canvas的相互绘制需要创建离屏canvas，离屏技术实际上是用空间换时间的一种技术。
canvas的toDataURL()方法
热门推荐
first_shun的博客
06-14 6万+
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型，默认为PNG格式。图片的分辨率为96dpi。 一、语法 canvas.toDataURL(type, encoderOptions); 二、参数 1、type：图片格式，默认为 image/png,可以是其他image/jpeg等 2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。 三、返回值 返回值是一个数据u...
HTML5新特性详解：扩展标记与图形渲染
`image.onload`函数确保在图像加载完成后执行代码，`context.drawImage(image, 0, 0, 120, 80)`用于在画布上绘制图像。通过不断调整`context.scale`和`context.rotate`的值，图像会按照指定的角度旋转，从而创建出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值