当前位置：网站首页>JS image to Base64

JS image to Base64

2022-07-07 14:28:00 【Snail games】

This article mainly introduces js Picture turn base64 The way , Now share with you , Also give you a reference .

Mode one ：Blob and FileReader object

Realization principle ：

Use xhr Ask for pictures , And set the returned file type as Blob object [xhr.responseType = "blob"]

Use FileReader Object reception blob

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>js Picture turn base64 The way </title>

</head>

<body>

<pid="container1"></p>

<script>

getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")

function getBase64(imgUrl) {

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest();

xhr.open("get", imgUrl, true);

// crucial

xhr.responseType = "blob";

xhr.onload = function () {

if (this.status == 200) {

// Get one blob object

var blob = this.response;

console.log("blob", blob)

// crucial

let oFileReader = new FileReader();

oFileReader.onloadend = function (e) {

let base64 = e.target.result;

console.log(" Mode one 》》》》》》》》》", base64)

};

oFileReader.readAsDataURL(blob);

//==== To display pictures on the page , You can delete ====

var img = document.createElement("img");

img.onload = function (e) {

window.URL.revokeObjectURL(img.src); // Clear and release

};

let src = window.URL.createObjectURL(blob);

img.src = src

document.getElementById("container1").appendChild(img);

//==== To display pictures on the page , You can delete ====

}

xhr.send();

}

</script>

</body>

</html>

Mode two ：canvas.toDataURL() Method

Realization principle ：

Use canvas.toDataURL() Method

Need to solve the cross domain problem of pictures image.crossOrigin = '';

Used Jquery Library $.Deferred() Method

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>js Picture turn base64 The way </title>

</head>

<body>

<pid="container2"></p>

<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";

//width、height When calling, the specific pixel value is passed in , Control size , If not, the default image size is

function getBase64Image(img, width, height) {

var canvas = document.createElement("canvas");

canvas.width = width ? width : img.width;

canvas.height = height ? height : img.height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

var dataURL = canvas.toDataURL();

return dataURL;

}

function getCanvasBase64(img) {

var image = new Image();

// crucial

image.crossOrigin = '';

image.src = img;

// crucial

var deferred = $.Deferred();

if (img) {

image.onload = function () {

deferred.resolve(getBase64Image(image));// take base64 Pass to done Upload processing

document.getElementById("container2").appendChild(image);

}

return deferred.promise();// The question is to make onload When you're done return sessionStorage['imgTest']

}

getCanvasBase64(imgSrc)

.then(function (base64) {

console.log(" Mode two 》》》》》》》》》",base64);

}, function (err) {

console.log(err);

});

</script>

</body>

</html>

原网站

版权声明
本文为[Snail games]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130614386971.html

当前位置：网站首页>JS image to Base64

JS image to Base64

边栏推荐

猜你喜欢

随机推荐