工作示例

<!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. Java Object类 和 String类 常见问答 6k字+总结

    写在最前面 这个项目是从20年末就立好的 flag,经过几年的学习,回过头再去看很多知识点又有新的理解.所以趁着找实习的准备,结合以前的学习储备,创建一个主要针对应届生和初学者的 Java 开源知识项 ...

  2. HDU1814和平委员会

    题目大意: 有n对的人,编号从1-2*n,m对的人之间互相不喜欢,每对人中必徐选1个人加入和平委员会,求字典序最小的解 -------------------------------- 2-SAT问题 ...

  3. tcpdump抓包及tshark解包方法介绍

    tshark是wireshark的命令行工具,通过shell命令抓取.解析报文.tcpdump是Linux系统下的抓包工具.wireshark和tcpdump都共同使用 libpcap作为其底层抓包的 ...

  4. 寻找最小字符串，IP地址——解题报告

    寻找最小字符串 题目 思路 在寻找最小字符串的时候需要用到的函数有strcmp和strcpy,首先先输入输入字符串,先假设第一个字符串为最小的字符串min,再然比较接下来的字符串,当接下来的字符串比m ...

  5. wmi_exporter+Prometheus+Grafana

    wmi_exporter+Prometheus+Grafana 原文地址: CSDN:NRlovestudy:Windows 下搭建 wmi_exporter+Prometheus+Grafana 服 ...

  6. Java中finalize()方法的作用

    finalize方法是Object提供的的实例方法,使用规则如下: 当对象不再被任何对象引用时,GC会调用该对象的finalize()方法 finalize()是Object的方法,子类可以覆盖这个方 ...

  7. ES模块化的导入和导出

    目录 环境准备 模块化 export.import export import import * as export default import 和 require 的区别 参考 环境准备 三个文件 ...

  8. hdu5884 Sort(二分)

    Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission ...

  9. 【noi 2.2_8758】2的幂次方表示（递归）

    题意:将正整数N用2的幂次方表示(彻底分解至2(0),2). 解法:将层次间和每层的操作理清楚,母问题分成子问题就简单了.但说得容易,操作没那么容易,我就打得挺纠结的......下面附上2个代码,都借 ...

  10. codeforces626D . Jerry's Protest (概率)

    Andrew and Jerry are playing a game with Harry as the scorekeeper. The game consists of three rounds ...