Base64와 JS 이미지 간 변환에 대한 간략한 분석(코드 포함)-JS 튜토리얼-php.cn

Base64와 JS 이미지 간 변환에 대한 간략한 분석(코드 포함)

奋力向前

풀어 주다： 2021-09-01 17:14:31

앞으로

4109명이 탐색했습니다.

이전 글 "mysql 설치 및 활용 분석(Favorite)"에서는 mysql 설치 및 활용에 대해 알아보았습니다. 다음 글은 JS에서 base64와 이미지 사이의 변환을 이해하는 데 도움이 될 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Base64와 JS 이미지 간 변환에 대한 간략한 분석(코드 포함)

오늘 apicloud를 사용하여 앱을 작성하다가 base64에서 이미지를 변환하여 현재 페이지에 바로 표시하는 문제에 직면했습니다. >trans" 모듈 이전에 "base64 형식apicloud写APP时，遇到一个base64转图片并直接展示在当前页面的问题，因为之前使用过“trans”模块，知道该模块可以将图片与base64格式之间来回转换

所以想都没想就使用了trans模块，但是到后来我发现我拿不到转换的图片路径，trans模块保存是使用fs:// ，或者可以选择将图片保存到系统相册

恕我才疏学浅不知道怎么去获取fs:// 路径，而且再去让用户手动去相册选择图片未免太麻烦

然后我就反应过来了，img标签不是可以直接识别base64字符并转换为图片吗？......

Base64와 JS 이미지 간 변환에 대한 간략한 분석(코드 포함)

诶，我开发还是过于依赖框架、模块、插件等，很多原生的东西都要记不得了

以后开发可一定得记住咯，顺便附上JS互转base64和图片

js将图片转化为base64

var img = "imgurl";//imgurl 就是你的图片路径 
 
function getBase64Image(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); 
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); 
     var dataURL = canvas.toDataURL("image/"+ext); 
     return dataURL; 
} 
 
var image = new Image(); 
image.src = img; 
image.onload = function(){ 
  var base64 = getBase64Image(image); 
  console.log(base64); 
}

로그인 후 복사

js将base64转化为图片格式

js直接设置img的src属性为图片的base64

으로 앞뒤로 변환할 수 있다는 것을 알고 있었기 때문에 trans를 사용했습니다. 모듈에 대해 생각도 하지 않았지만 나중에 변환된 이미지 경로를 얻을 수 없다는 것을 발견했습니다. trans 모듈은 fs:// 를 사용하여 저장됩니다. 이미지를 시스템 앨범에 저장하도록 선택하세요

죄송합니다. fs:// 경로를 얻는 방법을 모르고 사용자가 시스템 앨범에서 사진을 수동으로 선택하는 것이 너무 번거로울 것입니다. photo album

그러다가 깨달았는데, img 태그가 base64 문자를 직접 인식해서 이미지로 변환하는 게 가능한 거 아닌가요? ......🎜🎜 위챗 스크린샷_ 20210901170749 .jpg

🎜🎜안녕하세요, 제 개발은 아직도 프레임워크, 모듈, 플러그인 등에 너무 많이 의존하고 있어서 네이티브 내용을 많이 기억하지 못합니다🎜🎜향후 개발을 위해 꼭 기억해 두셔야 합니다. 그런데, JSbase64 및 그림 변환 🎜

js는 그림을 base64로 변환

document.getElementById(&#39;img&#39;).setAttribute( &#39;src&#39;, &#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==&#39; );<br data-filtered="filtered">如下：<br data-filtered="filtered"><img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64와 JS 이미지 간 변환에 대한 간략한 분석(코드 포함)" >

로그인 후 복사