工作示例

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

  </head>

  <body>

    <input type="file" name="" id="file" />

    <button id="send">发送js生成的图片</button>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>

    <script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>

    <script>

      let canvas;

      function setup() {

        canvas = createCanvas(500, 400);

        background(0, 100, 200);

        fill(random(255), random(255), random(255));

        noStroke();

        ellipse(width / 2, height / 2, 40, 40);

      }

      // 手工上传图片

      document.getElementById('file').onchange = function(e) {

        const files = e.target.files;

        const firstFile = files[0];

        const data = new FormData();

        data.append('smfile', firstFile, '[anime]' + firstFile.name);

        send(data);

      };

      // 使用canvas保存的base64，转化为blob使用FormData上传

      document.getElementById('send').onclick = function(e) {

        const contentType = 'image/png';

        const dataURL = canvas.elt

          .toDataURL(contentType)

          .replace(/data\:image\/png\;base64\,/, '');

        const byteCharacters = atob(dataURL);

        // 这里使用DataView代替下面注释的Uint8Array

        let buffer = new ArrayBuffer(byteCharacters.length);

        let view = new DataView(buffer);

        for (let i = 0; i < byteCharacters.length; i++) {

          view.setUint8(i, byteCharacters.charCodeAt(i));

        }

        const blob = new Blob([buffer], {type: contentType});

        // const byteNumbers = new Array(byteCharacters.length);

        // for (let i = 0; i < byteCharacters.length; i++) {

        //   byteNumbers[i] = byteCharacters.charCodeAt(i);

        // }

        // const byteArray = new Uint8Array(byteNumbers);

        // const blob = new Blob([byteArray], {type: contentType});

        const data = new FormData();

        data.append('smfile', blob, '[anime]new.png');

        send(data);

      };

      function send(data) {

        axios

          .post('https://sm.ms/api/v2/upload', data)

          .then(function(response) {

            console.log(response);

          })

          .catch(function(error) {

            console.log(error);

          });

      }

    </script>

  </body>

</html>

js bese64转化为blob使用FormData上传的更多相关文章

  1. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  2. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  4. canvas利用formdata上传到服务器

    1.首先绘制canvas图片 <canvas id="myCanvas" width="100" height="100" style ...

  5. （十）HttpClient以multipart/form-data上传文件

    原文链接:https://blog.csdn.net/wsdtq123/article/details/78888734 POST上传文件 最早的HTTP POST是不支持文件上传的,给编程开发带来很 ...

  6. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  7. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  8. 项目总结21：项目总结21：input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  9. 使用JS实现页面中动态添加文件上传输入项

    1. 编写JSP <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

随机推荐

  1. 学习SpringBoot，整合全网各种优秀资源，SpringBoot基础，中间件，优质项目，博客资源等，仅供个人学习SpringBoot使用

    学习SpringBoot,整合全网各种优秀资源,SpringBoot基础,中间件,优质项目,博客资源等,仅供个人学习SpringBoot使用 一.SpringBoot系列教程 二.SpringBoot ...

  2. JDBC的操作步骤和实例（）

    加载JDBC驱动程序 提供JDBC连接的URL 创建数据库的连接 创建一个Statement 执行SQL语句 处理结果 关闭JDBC对象 实例JdbcUtils 创建一个JDBC程序包含7个步骤: 1 ...

  3. JS 实现一个实时动态校验，将输入格式错误的显示为红色背景

    功能描述: 源码: 功能描述: 实时动态校验,如果输入的格式错误,将弹窗提示输入格式错误并将背景展示为红色. 源码: 前台: <hy:formfield name="cxfdl&quo ...

  4. Spring MVC 处理一个请求的流程分析

    Spring MVC是Spring系列框架中使用频率最高的部分.不管是Spring Boot还是传统的Spring项目,只要是Web项目都会使用到Spring MVC部分.因此程序员一定要熟练掌握MV ...

  5. 从NMEA0183到GNSS定位数据获取（一）原理篇

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述 GPS我们都知道,一种用来全球定位的系统,后来俄罗斯推出了格洛纳斯定位系统,中国推出了北斗定位,欧盟有 ...

  6. 2020牛客暑期多校训练营（第五场）B - Graph （异或 最小生成树 分治 Trie）

    B - Graph 题目链接 每次操作不会改变两点之间的路径异或和 以 1 号点为起点,算出任意一点到 1 号点的异或值 dis[i](把该值当做 i 号点权值), 那么任意两点的异或值为 \(dis ...

  7. 如何在windows上升级Powershell到5.1版本？

    前言 此篇我们说的是Powershell5.1低版本到5.1的升级,对于Powershell6(及以上版本)可以跨平台独立安装,在windows上可与之前的版本并存. 首先要整清楚Powershell ...

  8. 二进制安装kubernetes（七） 部署知识点总结

    1.k8s各个组件之间通信,在高版本中,基本都是使用TSL通信,所以申请证书,是必不可少的,而且建议使用二进制安装,或者在接手一套K8S集群的时候,第一件事情是检查证书有效期,证书过期或者TSL通信问 ...

  9. C、C++语言中参数的压栈顺序

    要回答这个问题,就不得不谈一谈printf()函数,printf函数的原型是:printf(const char* format,-) 没错,它是一个不定参函数,那么我们在实际使用中是怎么样知道它的参 ...

  10. SPOJ SUBST1 New Distinct Substrings（后缀数组 本质不同子串个数）题解

    题意: 问给定串有多少本质不同的子串? 思路: 子串必是某一后缀的前缀,假如是某一后缀\(sa[k]\),那么会有\(n - sa[k] + 1\)个前缀,但是其中有\(height[k]\)个和上一 ...