使用canvas.toDataURL把图片转为base64格式

function getBase64(url) {//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染const img = new Image();// 允许资源跨域使用img.setAttribute('crossOrigin', 'anonymous');// 这里的地址要网络路径或者你用input上传的地址img.src ="https://pics0.baidu.com/feed/3b292df5e0fe992518448ccedf8964d58cb17194.jpeg?token=a8af55e099d7507f313330013f84d5dc"img.onload = function() {// 设置图片的尺寸const imgWidth = 640const imgHeight = 1138;let canvas = document.createElement('canvas')const ctx = canvas.getContext('2d');canvas.width = imgWidth;canvas.height = imgHeight;// 这里表示从坐标0,0开始绘制，如果长宽就是图片的长宽的话，绘制出来就和原图片一样ctx.drawImage(img, 0, 0, imgWidth, imgHeight);const dataURL = canvas.toDataURL('image/png');console.log(dataURL);return dataURL}}

使用canvas.toDataURL把图片转为base64格式相关推荐

为什么要将图片转为base64格式
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址; 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服 ...
剪贴板中图片转为BASE64格式
需求将图片复制到剪贴板后,希望将图片快捷地转换为BASE64格式. 各种在线工具往往需要先将图片保存到本地,然后将本地文件上传.现在考虑将图片保存到本地这一步去掉,直接将图片从剪贴板粘贴到网页的某个 ...
java todataurl_利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
vue项目，把图片文件流转为base64格式以图片形式展示在前端
问题描述前台需要展示图片,期望后台直接返回图片地址,但是后台给的是的文件流而不是一个图片地址,需要把文件流转为base64的格式展示出来. 请求后台接口时,返回图片内容如下: 上图不是base64格 ...
如何将图片转换base64格式？data:image/png;base64又是什么？
一.我们在看代码时经常在img或css背景图片中看到: src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAA ...
使用Js将图片转换为base64格式-在线示例
图片转base64-在线工具 <!Doctype html> <html><head><meta charset="utf-8" /> ...
base64和普通字符串互转---window.btoa window.atob；图片的base64格式
目录一.作用二.使用方法一.作用将非ASCLL码数据转换为ASCLL码数据,便于网络传输(某些系统仅支持ASCLL编码): 二.使用方法 1)测试代码: //window.btoa(" ...
php 图片文件转base64编码格式,php如何将图片转为base64编码格式
php将图片转为base64编码格式的方法:首先读取图片流:然后利用[base64_encode]函数进行编码格式转换即可. PHP保存Base64图片base64_decode的问题 PHP对Bas ...
java返回图片base64_java将图片转为base64返回给前端
本文实例为大家分享了java将图片转为base64返回给前端的具体代码,供大家参考,具体内容如下一.controller端代码 @RequestMapping(value = "/capt ...

使用canvas.toDataURL把图片转为base64格式

使用canvas.toDataURL把图片转为base64格式

使用canvas.toDataURL把图片转为base64格式相关推荐

最新文章

热门文章