var img = "./bigImg.jpg";//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);

var type = "image/jpg";

console.log(base64);

var conversions = base64ToBlob(base64, type);

console.log(conversions)

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

var url = window.URL.createObjectURL(conversions);

console.log(url,'url')

document.getElementById('img').src = url

}

function base64ToBlob(urlData, type) {

var arr = urlData.split(',');

var mime = arr[0].match(/:(.*?);/)[1] || type;

// 去掉url的頭，并轉化為byte

var bytes = window.atob(arr[1]);

// 處理異常,將ascii碼小于0的轉換為大于0

var ab = new ArrayBuffer(bytes.length);

// 生成視圖(直接針對內存)：8位無符號整數，長度1個字節

var ia = new Uint8Array(ab);

for (var i = 0; i < bytes.length; i++) {

ia[i] = bytes.charCodeAt(i);

}

return new Blob([ab], {

type: mime

});

}

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的window把图片转成blob_将图片转成Base64，再将Base64转成Blob的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。