需求

群里的一个小朋友一直要求我帮他实现以下，我就写了一个案例。需求就是，他用canvas生成了一个base64格式的图片，然后需要将这个图片上传到服务器上面去。

代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<img src="xwz.jpg" alt="" id="img">
</body>
<script>let img = document.querySelector("#img");img.onload = function () {//创建formdata对象var formdata = new FormData();//获取图片的base64格式var data = imgSrcToBase64(img);//将获取的base64格式图片转换为图片文件对象var imgFile = convertBase64UrlToBlob(data);//将文件添加到formdata里面formdata.append("file",imgFile);$.ajax({url: "http://localhost:3000/map",type:"post",data:formdata,processData: false,  // 不处理数据contentType: false ,  // 不设置内容类型success:function (e) {console.log(e);}});};/*** 将以base64的图片url数据转换为Blob* @param urlData*            用url方式表示的base64图片数据*/function convertBase64UrlToBlob(urlData){var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte//处理异常,将ascii码小于0的转换为大于0var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for (var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob( [ab] , {type : 'image/png'});}//将图片转为base64格式function imgSrcToBase64(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);return canvas.toDataURL();}
</script>
</html>

由于自己没有base64格式的图片，所以现成将一张图片转成了base64格式。然后再将其转换成二进制的格式，放入到formdata对象内，直接将formdata使用ajax上传。

通过图片地址，将图片处理成base64，使用ajax上传图片相关推荐

vue通过在线图片地址实现图片下载
vue通过在线图片地址实现图片下载 1.定义对应的方法. downloadIamge(imgsrc, name) {//下载图片地址和图片名var image = new Image()// 解决跨域 ...
js vue将后台返回的url图片地址以图片形式保存到本地
直接将下面函数复制到项目中,传入要保存的 url, 以及要设置的文件名字,即可. // 现在 html中定义一个容器,如 <div id="qrcode">< ...
根据图片地址检查图片格式，今日头条有效
直接看代码 /*** 判断图片格式,如果不是GIF就返回true* 是GIF就返回false* * @param imgUrl* @return* @throws HttpException* @th ...
linux用命令下载图片,Linux命令行中采集指定页面的图片地址及图片下载
获取指定页面中的图片地址: curl news.baidu.com | grep -Eio '(http|ftp|https)://[A-Za-z0-9_./]+(.jpg|.png|.gif)' 复 ...
HTML基础-05-图片（引用图片src=“图片地址“、图片位置 align=“位置“、浮动图片 style=“float:位置“、图片链接 href=“目标url“、图形映射）
文章目录 1. 引用图片(src="图片地址") 语法示例完整示例 2. 图片的位置(align="位置") 语法示例完整示例 3. 浮动图片(style= ...
nodejs读取图片并将二进制数据转换成base64格式
首先,使用nodejs进行数据读取,需要用到nodejs的fs模块进行数据读取: fs.readFile('你的资源路径','binary',function(err,data){if(err){co ...
php图片地址替换,php把采集内容中图片地址下载并替换成本地地址
把字符串中地址全部获取到一个数组我们利用preg_match_all函数代码如下复制代码 $str=' '; $pattern="//"; preg_match_all($pa ...
uni-app 动态拼接图片地址，图片无法渲染，静态地址可以显示
先上图这里根据请求的参数拼接图片的地址,采用-/方式. 问题:动态无法渲染,静态完全可以. 解决: 这里将路径改成根路径就ok啦.试了很多种请求的方式,原来是路径问题,就解决啦.
vue 组件中图片地址，图片获取
前提:在组件中使用引用图片,用于<img src> 或者背景图片background; 当我们利用vue-cli 搭建好项目的框架,开始高高兴兴开发组件的时候,有的时候想加一张图片, ...
php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

通过图片地址，将图片处理成base64，使用ajax上传图片

需求

代码

通过图片地址，将图片处理成base64，使用ajax上传图片相关推荐

最新文章

热门文章