工作示例

<!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. BIO,NIO,AIO 总结

    BIO,NIO,AIO 总结 Java 中的 BIO.NIO和 AIO 理解为是 Java 语言对操作系统的各种 IO 模型的封装.程序员在使用这些 API 的时候,不需要关心操作系统层面的知识,也不 ...

  2. 云原生项目实践DevOps(GitOps)+K8S+BPF+SRE，从0到1使用Golang开发生产级麻将游戏服务器—第1篇

    项目初探 项目地址: 原项目:https://github.com/lonng/nanoserver 调过的:https://github.com/Kirk-Wang/nanoserver 这将是一个 ...

  3. 改造xxl-job的客户端日志文件生成体系

    为什么要改造XXL-JOB原有的日志文件生成体系   xxl-job原本自己的客户端日志文件生成策略是:一个日志记录就生成一个文件,也就是当数据库存在一条日志logId,对应的客户端就会生成一个文件, ...

  4. MVC架构 项目实践

    MVC MVC架构程序的工作流程 springmvc 中dao层和service层的区别 项目实践 项目目录 项目实现流程 JSP登录页面View层 LoginServletjavaControlle ...

  5. brew更换国内源

    来源:清华大学开源软件镜像站(https://mirror.tuna.tsinghua.edu.cn/help/homebrew/) 替换现有上游 1 # brew 程序本身,Homebrew/Lin ...

  6. java日期

    // 完整显示日期时间 String str = (new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS")).format(new Date ...

  7. hdu3555 Bomb(要49）

    Problem Description The counter-terrorists found a time bomb in the dust. But this time the terroris ...

  8. vlc音视频开发（一）环境搭建（qt篇)

    来源:微信公众号「编程学习基地」 目录 简介 qt配置vlc环境 simple_libvlc_qt_player 项目地址 简介 VLC 是一款自由.开源的跨平台多媒体播放器及框架,可播放大多数多媒体 ...

  9. c# grpc

    刚接触RPC时只知道概念是远程过程调用协议,分为服务端和客户端,客户端请求服务端,服务端再回应客户端,粗看和HTTP一应一答没有什么区别.既然有着存在即合理的说法,网上找找说法,有的讲的太深感觉太啰嗦 ...

  10. nginx实现文件上传和下载

    nginx实现文件上传和下载 发布时间:2020-06-05 16:45:27 来源:亿速云 阅读:156 作者:Leah 栏目:系统运维 这篇文章给大家分享的是nginx实现文件上传和下载的方法.小 ...