图片转换成base64

let bgcImage = ‘http://192.168.0.83:9080/files/4a9c3056-9b9b-4b41-b8e2-fd9f27023c41.jpg‘
let image = new Image()
    image.crossOrigin = ‘‘ // 必须有这个
    image.src = bgcImage
    image.onload = () => { // 图片加载完成后,调用getBase64Image方法
        let base64ImageSrc = getBase64Image(image)
        console.log(base64ImageSrc )
}

export function getBase64Image(image, width, height) { // width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
  let canvas = document.createElement(‘canvas‘)
  canvas.width = width !== undefined ? width : image.width
  canvas.height = height !== undefined ? height : image.height
  let ctx = canvas.getContext(‘2d‘)
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
  let ext = image.src.substring(image.src.lastIndexOf(‘.‘) + 1).toLowerCase()
  let dataURL = canvas.toDataURL(‘image/‘ + ext)
  return dataURL
}

原文地址:https://www.cnblogs.com/zhaobao1830/p/11579172.html

时间: 2024-11-08 09:34:53

图片转换成base64的相关文章

js绝对地址图片转换成base64的方法

//将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); //为了解决跨域,可以直接img.crossOrigin=''就能解决图片跨域问题 img.crossOrigin = 'xes'; img.onload = function(){ canvas

按比例压缩图片和图片转换成BASE64

通常会需要将突破转换为字符串的操作,贴此详例,仅供参考和积累 #region 按比例压缩图片和图片转换成BASE64 /// <summary> /// 按照比例缩小图片 /// </summary> /// <param name="srcImage">要缩小的图片</param> /// <param name="percent">缩小比例</param> /// <returns&g

html5将图片转换成base64的实例代码

这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能. 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http

delphi将图片转换成Base64编码函数

{************************************************************************** 名称: BaseImage 参数: fn: TFilename 返回值: string 功能: 将fn文件转换成Base64编码,返回值为编码 **************************************************************************} function BaseImage(fn: str

js如何将选中图片文件转换成Base64字符串?

如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传文件都是在web页面端通过表单直接提交,再由服务器端捕获请求来进行处理的.但是在前后端分离趋于一种流行趋势,再加上Android和iOS开发技术日渐成熟, 大部分团队都会选择在服务器端仅提供一套通用的webservice数据接口,而web页面.Android和iOS统一都通过这套数据接口来向服务器发送请求和获

js 将图片文件转换成base64

1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getConte

wkhtmltopdf 项目问题 将小图片转换成流对象页面输出

项目工作中问题,linux环境下,使用wkhtmltopdf 做html转换成pdf下载,页面存在图片,转换出来的pdf 生成的html可以正常使用,图片显示正常,直接将生成的html路径转换成pdf 图片位置,总是显示空白; 图片空白问题,自己也查阅了网上好多信息,并没有得到如意的结果,只能退而求其次自己想办法了; 自己使用的解决方法,方便大家工作使用,将生成静态页面模板中的图片,手动的调用方法转换成流对象;在页面通过 <img src="data:image/jpg;base64,XX

图片转换成字符串上传到服务器及字符串转换为图片

#pragma mark ------- UIImage图片转成base64字符串: //将 已转换成为 NSData 类型的图片 转换为 NSString 类型 //iOS 7.0+      ----    base64EncodedStringWithOptions NSString *_encodedImageStr = [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength]

JS 如何将“在线图片资源”转换成“base64”

在实现html2canvas截图的功能时,发现不支持"图片跨域",这可伤脑筋了: 偶然发现如果将"在线图片资源"转换成base64后,用base64渲染,这样完美解决问题: 因为图片时跨域的,所以我们在转换过程中需要加一段代码,用来支持跨域: image.crossOrigin = "*"; 完整代码如下: function getBase64Image(img) { var canvas = document.createElement(&qu