相对路径图片转成base64格式
function image(imgurl ) { //imgurl 本地图片路径
var img = 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)
}
}
网络路径图片转成base64格式
方法一:
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
// 至关重要
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
var blob = this.response;
console.log("blob", blob)
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
// 此处拿到的已经是 base64的图片了
let base64 = e.target.result;
downLoadZt.downLoadQRcode(base64);
};
oFileReader.readAsDataURL(blob);
//====为了在页面显示图片,可以删除====
// var img = document.createElement("img");
// img.onload = function (e) {
// window.URL.revokeObjectURL(img.src); // 清除释放
// };
// let src = window.URL.createObjectURL(blob);
// img.src = src
// console.log(src)
//document.getElementById("container1").appendChild(img);
//====为了在页面显示图片,可以删除====
}
}
xhr.send();
}
方法二:
//imgUrl 为网络图片的路径
let image = new Image();
image.src = imgUrl + "?v=" + Math.random(); // 处理缓存
image.crossOrigin = "*"; // 支持跨域图片
image.onload = function() {
let base64 = getBase64Image(image); //调用函数并将其转为base64图片
//ctx.drawImage(image, 0, 0, 500, 600); //将生成的图片放在canvas中
};
//调用函数并将其转为base64图片:
function getBase64Image(img) {
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
let dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}
浏览器下载图片
/* 图片下载 */
var downLoadZt = {
downLoadQRcode(imgData) {
let filename = $("#tmedit").val();
this.downloadFile(filename + '.png', imgData);
},
// 下载
downloadFile(fileName, content) {
let aLink = document.createElement('a');
let blob = this.base64ToBlob(content); // new Blob([content]);
let evt = document.createEvent('HTMLEvents');
evt.initEvent('click', true, true);// initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));// 兼容火狐
},
// base64转blob
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
};