通过 JS 将 BSAE64 生成图片并下载

Posted Mazey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过 JS 将 BSAE64 生成图片并下载相关的知识,希望对你有一定的参考价值。

html

<div style="display:block;margin:0 auto;width:638px;height:795px;">
    <div id="render" >CONTENT</div>
</div>

<div id="template" style="margin:10px 0 0 385px;">
    <input type="button" onclick="qc0926()" value="下载图片" />
</div>

JS:

<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
    var canvas,render,html,imgsrcgo;
    function renderHTMLAndSave() {
        var render= document.getElementById(\'render\');
        html2canvas(render).then(function (canvas) {
            var imgsrc= canvas.toDataURL();imgsrcgo=imgsrc;
        });
    }
    window.onload=renderHTMLAndSave();
    var imgsrc;
    var imgData;
    var type=\'png\';
    var _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, \'jpeg\');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return \'image/\' + r;
    };
    function saveFile(data, filename){
        var save_link = document.createElementNS(\'http://www.w3.org/1999/xhtml\', \'a\');
        save_link.href = data;
        save_link.download = filename;
        var event = document.createEvent(\'MouseEvents\');
        event.initMouseEvent(\'click\', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
    function qc0926(){
        imgData=imgsrcgo;
        imgData = imgData.replace(_fixType(type),\'image/octet-stream\'); // 加工image data,替换mime type
        var filename = \'zgsjdomaincertification\' + \'_name\' + \'.\' + type; // 下载后的文件名
        window.load=saveFile(imgData,filename); //下载域名证书
    };
</script>

html2canvas.js - 代码:

/*
  html2canvas 0.5.0-alpha2 <http://html2canvas.hertzen.com>
  Copyright (c) 2015 Niklas von Hertzen

  Released under MIT License
*/
// 篇幅太长,无法保存请查看原文

附录:

Base64:Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一,Base64 就是一种基于 64 个可打印字符来表示二进制数据的方法。Base64 编码是从二进制到字符的过程,可用于在 HTTP 环境下传递较长的标识信息。采用 Base64 编码具有不可读性,需要解码后才能阅读。

Canvas:Canvas API(画布)是在 HTML5 中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用 JavaScript 操作的位图(bitmap)。Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。

阅读原文:https://blog.mazey.net/1926.html

以上是关于通过 JS 将 BSAE64 生成图片并下载的主要内容,如果未能解决你的问题,请参考以下文章

js把通过图片路径生成base64

java远程获取图片生成base64串

通过js实现随机生成图片

将div生成图片并下载下来

js实现canvas保存图片为png格式并下载到本地

JS 图片转Base64