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); console.log(dataURL, JSON.stringify(dataURL)) return dataURL; } /** *Base64字符串转⼆进制 */ function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } var img = './image/ispacehome.png'; var image = new Image(); image.src = img; image.onload = function () { //这样就获取到了⽂件的Base64字符串 var base64 = getBase64Image(image); console.log(base64) // document.getElementById('testImg').src = base64 //Base64字符串转⼆进制 var file = dataURLtoBlob(base64); console.log(file) }
标签:canvas,dataURL,img,二进制,image,base64,var,图片 From: https://www.cnblogs.com/fyh0912/p/17296036.html