工作示例

<!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. vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

    基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...

  2. Neo4j 导入 Nebula Graph 的实践总结

    摘要: 主要介绍如何通过官方 ETL 工具 Exchange 将业务线上数据从 Neo4j 直接导入到 Nebula Graph 以及在导入过程中遇到的问题和优化方法. 本文首发于 Nebula 论坛 ...

  3. DEDECMS：更改dede提示框标题

    在include文件夹下,修改common.func.php文件里的 <title>DedeCMS提示信息</title> 修改成自己想要的标题. 将 <b>Ded ...

  4. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  5. CSS奇思妙想 -- 使用 background 创造各种美妙的背景

    本文属于 CSS 绘图技巧其中一篇,系列文章: 在 CSS 中使用三角函数绘制曲线图形及展示动画 CSS奇思妙想 -- 使用 CSS 创造艺术 将介绍一些利用 CSS 中的 background.mi ...

  6. 使用eclipse写第一个Java_web的hello_world项目

    1.先创建一个Java_web项目 如果你没有下载过Tomcat服务器,不会配置,建议看一下我得这一篇博客:https://www.cnblogs.com/kongbursi-2292702937/p ...

  7. hdu1011 Starship Troopers

    Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submissio ...

  8. Codeforces Round #656 (Div. 3) C. Make It Good (贪心,模拟)

    题意:给你一个数组\(a\),可以删除其前缀,要求操作后得到的数组是"good"的.对于"good":可以从数组的头和尾选择元素移动到新数组,使得所有元素移动后 ...

  9. 如何用 4 个小时搭建一个新 “Clubhouse” ，引爆声音社交新风口

    Clubhouse,基于实时音频技术的声音社交现象级火爆 最近,让硅谷两位顶级 VC 大打出手争相投资的 Clubhouse 火到了国内,甚至在社交圈里 "一码难求",此种火爆程度 ...

  10. 请问什么时候对象分配会不在 TLAB 内分配

    Java 对象分配流程 我们这里不考虑栈上分配,这些会在 JIT 的章节详细分析,我们这里考虑的是无法栈上分配需要共享的对象. 对于 HotSpot JVM 实现,所有的 GC 算法的实现都是一种对于 ...