首页 > 其他分享 >图片转二进制 base64

图片转二进制 base64

时间:2023-04-07 14:35:24浏览次数:39  
标签:canvas dataURL img 二进制 image base64 var 图片

        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
            var dataURL = canvas.toDataURL("image/" + ext);
            console.log(dataURL, JSON.stringify(dataURL))
            return dataURL;
        }
        /**
        *Base64字符串转⼆进制
        */

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }
        var img = './image/ispacehome.png';
        var image = new Image();
        image.src = img;
        image.onload = function () {
            //这样就获取到了⽂件的Base64字符串
            var base64 = getBase64Image(image);
            console.log(base64)
            // document.getElementById('testImg').src = base64
            //Base64字符串转⼆进制
            var file = dataURLtoBlob(base64);
            console.log(file)
        }

 

标签:canvas,dataURL,img,二进制,image,base64,var,图片
From: https://www.cnblogs.com/fyh0912/p/17296036.html

相关文章

  • Python selenium过图片滑块验证
    计算滑块移动距离defget_distance(image1,image2):'''拿到滑动验证码需要移动的距离:paramimage1:没有缺口的图片对象:paramimage2:带缺口的图片对象:return:需要移动的距离'''#print('size',image1.size)threshold=5......
  • 如何通过博客文本直接发布二进制数据文件(非下载链接)
    是否想过,在博客中直接利用文本字符传播二进制数据?现在这个被我遗忘了近10年的便捷的工作完工了:《Base64&UUE文件编码解码工具》,直接将二进制文件编码为可由WinRAR解压的UUE纯文本格式文件,还可以先加密码,这样你就可以在博客中直接发布二进制文件了,下面就是这个小工具的可......
  • 织梦CMS粘贴图片自动上传到服务器(Java版)
    ​如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • 动易CMS粘贴图片自动上传到服务器(Java版)
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • canvas实现图片镜像翻转的2种方式
    canvas实现图片镜像翻转的2种方式原文引用:https://www.qetool.com/scripts/view/23387.html1.通过canvas自带的画布方法进行翻转varimg=newImage();//这个就是img标签的dom对象img.src='./sy.png';img.onload=function(){//图片加载完成后,执行此方......
  • Parcelable传递图片,复杂对象,对象列表
    packagecom.ql.model;importandroid.os.Parcel;importandroid.os.Parcelable;publicclassStockimplementsParcelable{ privateStringfield_0;//代码+\n+名称 privateStringfield_1;//最新+\n+金额 privateStringfield_2;//涨幅 privateStringfield_3;//涨......
  • android 拖拽图片&拖动浮动按钮到处跑
    来自老外:importandroid.app.Activity;importandroid.content.Context;importandroid.graphics.Canvas;importandroid.os.Bundle;importandroid.view.MotionEvent;importandroid.widget.AbsoluteLayout;importandroid.widget.Button;public......
  • CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、
    本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color、背景图片:background-image、背景平铺:background-repeat、背景位置:background-position和背景附着:background-attachment。同时记录了背景色半透明的写法以及背景属性复合写法。1常用背景属性属性描述使用......
  • docker使用openJDK导致图片验证码错误
    简介:docker使用openJDK导致Excel导出问题问题:本地环境导出Excel正常,测试环境导出Excel失败image.png看到上方报错日志开始以为是初始化WorkBook失败导致的空指针问题image.png后来打印了WorkBook对象发现并不是这个原因导致的空指针解决办法经排查发现开发项目的时候都是......
  • python_PIL图片拼接,符合需求但不完美!!
    仅能符合需求的图片拼接工具。。。使用第三方包为:importtkinterastkfromtkinterimportEntry,ButtonfromtkinterimportfiledialogfromPILimportImage工具的样子:图片拼接示例首先选择多个需要拼接的图片,然后回自动调整图片的宽度比,纵向拼接 拼接后就是这个样子......