javascript 实现图片资源(base64,blob)的互转，及上传到服务器，及js屏幕截屏

最新推荐文章于 2024-02-19 10:41:39 发布

wucong60

最新推荐文章于 2024-02-19 10:41:39 发布

阅读量1w

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wucong60/article/details/81289227

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 将本地上传的图片转化为 dataUrl供图片预览，可以使用

URL.createObjectURL(Blob/File) 或者 FileReader，参考 https://www.cnblogs.com/zhangdiIT/p/7895903.html

将本地图片转化为base64，可使用FileReader
将网络上的图片转化为base64, 可使用canvas.toDataURL()
将base 64转成blob，可使用canvas.toDataURL(）
将base64图片提交到服务器

/**  
 * 通过ueditor将base64图片提交到服务器,依赖jquery.
 * var base64str = "data:image/png;base64,/9j/4AAQSkZJRg................ABAQAAAQABAAD/2wBDAAMCAgICOK//Z";
 * sumitImageFile(base64str).then(function (data) {
 *     console.log(data);
 * });
 */
function sumitImageFile(base64Codes) {

    var convertBase64UrlToBlob = function (urlData) {
        var arr = urlData.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  

        //处理异常,将ascii码小于0的转换为大于0  
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }

        return new Blob([ab], { type: mime });
    };

    var getFileExt = function (urlData) {
        var arr = urlData.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        return mime.replace("image/", "");
    };

    var deferred = $.Deferred();

    var form = document.forms[0];

    //var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数  
    var formData = new FormData();

    var fileExt = getFileExt(base64Codes);

    //convertBase64UrlToBlob函数是将base64编码转换为Blob  
    formData.append("upfile", convertBase64UrlToBlob(base64Codes), "file_" + Date.parse(new Date()) + "." + fileExt);  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同  

    //ajax 提交form  
    $.ajax({
        url: window.location.origin + '/article/ueditor/asp/controller.asp?action=uploadimage',
        type: "POST",
        data: formData,
        //dataType: "text",
        processData: false,         // 告诉jQuery不要去处理发送的数据  
        contentType: false,        // 告诉jQuery不要去设置Content-Type请求头  

        success: function (data) {
            //console.log(data);
            if (data) {
                data = JSON.parse(data);
                if (data.state == "SUCCESS") {
                    deferred.resolve(window.location.origin + data.url);
                }
                else {
                    deferred.reject("error");
                }
            }

            else {
                deferred.reject("error");
            }

            //window.location.href = "${ctx}" + data;
        },
        xhr: function () {            //在jquery函数中直接使用ajax的XMLHttpRequest对象  
            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    console.log("正在提交." + percentComplete.toString() + '%');        //在控制台打印上传进度  
                }
            }, false);

            return xhr;
        }

    });

    return deferred.promise();
}

2. JS 截屏

<html>

<head>
    <style>
        .box {
            width: 600px;
            height: 3000px;
            background-color: pink;
        }
    </style>
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script type="text/javascript">
        function save_screen_capture_to_chunzheng(subject) {
            html2canvas(document.body).then(function(canvas) {
                return canvas.toDataURL(); //base64 string
            }).then(function(dataUrl) {
                return sumitImageFile(dataUrl, subject);
            }).then(function(data) {
                console.log(data);
                if (data && data['upload_length'] > 0) {
                    //在这里提交您的表单：比如： 当前表单的id是form_1, 可以写 $('#form_1').submit()
                    //todo:
                }
            });
        }


        function sumitImageFile(base64Codes, subject) {

            var convertBase64UrlToBlob = function(urlData) {
                var arr = urlData.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte  

                //处理异常,将ascii码小于0的转换为大于0  
                var ab = new ArrayBuffer(bytes.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < bytes.length; i++) {
                    ia[i] = bytes.charCodeAt(i);
                }

                return new Blob([ab], {
                    type: mime
                });
            };

            var getFileExt = function(urlData) {
                var arr = urlData.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                return mime.replace("image/", "");
            };

            var deferred = $.Deferred();

            var form = document.forms[0];

            //var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数  
            var formData = new FormData();

            var fileExt = getFileExt(base64Codes);

            //convertBase64UrlToBlob函数是将base64编码转换为Blob  
            formData.append("file", convertBase64UrlToBlob(base64Codes), subject + "." + fileExt); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同  

            //ajax 提交form  
            $.ajax({
                url: '你提交的URL',
                type: "POST",
                data: formData,
                //dataType: "text",
                processData: false, // 告诉jQuery不要去处理发送的数据  
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头  

                success: function(data) {
                    deferred.resolve(data);
                },
                xhr: function() { //在jquery函数中直接使用ajax的XMLHttpRequest对象  
                    var xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                            console.log("正在提交." + percentComplete.toString() + '%'); //在控制台打印上传进度  
                        }
                    }, false);

                    return xhr;
                }

            });

            return deferred.promise();
        }
    </script>
</head>

<body>
    <div class='box'></div>
    <input type="button" value="button" onclick="save_screen_capture_to_chunzheng('玉米又涨价啦')"> 生成界面如下：
</body>

</html>

wucong60

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javascript 实现图片资源(base64,blob)的互转，及上传到服务器，及js屏幕截屏

1. 将本地上传的图片转化为 dataUrl供图片预览，可以使用URL.createObjectURL(Blob/File) 或者 FileReader，参考https://www.cnblogs.com/zhangdiIT/p/7895903.html 将本地图片转化为base64，可使用FileReader 将网络上的图片转化为base64, 可使用canvas.toDa...
复制链接

扫一扫