根据网络url地址，拿到网络图片的base64.
网上找的那些玩意儿，base64不能解析为图片，还是下面这个靠谱
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onload=function(){
var fileName = "https://res.study.itaojin.cn/2020-04/eb1f330aab9b4fada4f8d6602dea251b.png"
getBase64(fileName);
}
// var imgSrc = "img/1.jpg";
function getBase64(img){//传入图片路径，返回base64
var image = new Image();
image.crossOrigin = '';
image.src = img;
var deferred=$.Deferred();
if(img){
image.onload =function (){
var data = getBase64Image(image);
console.log(data);
document.getElementById("ID").src = data;
deferred.resolve(data);//将base64传给done上传处理
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
}
function getBase64Image(img,width,height) {//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;
}
</script>
<img id="ID" src=""/>
</body>
</html>
下面这个用于：js下载图片
function downloadForJS(){ var ele = document.getElementById("ID"); var fileName = "https://res.study.itaojin.cn/2020-04/eb1f330aab9b4fada4f8d6602dea251b.png" //使用html2canvas 转换html为canvas html2canvas(ele).then(function(canvas) { if(false){ //判断IE下保存方法 var blob = canvas.msToBlob(); window.navigator.msSaveBlob(blob, fileName); }else{//其他浏览器保存方法 var saveLink = document.createElement( 'a'); saveLink.href = imgData; saveLink.download = img; saveLink.click(); } }); }
以上俩代码合二为一：
<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onload=function(){
var fileName = "https://res.study.itaojin.cn/2020-04/eb1f330aab9b4fada4f8d6602dea251b.png"
getBase64(fileName);
}
// var imgSrc = "img/1.jpg";
function getBase64(img){//传入图片路径，返回base64
var image = new Image();
image.crossOrigin = '';
image.src = img;
var deferred=$.Deferred();
if(img){
image.onload =function (){
var data = getBase64Image(image);
console.log(data);
document.getElementById("ID").src = data;
deferred.resolve(data);//将base64传给done上传处理
var ele = document.getElementById("ID");
var fileName = "https://res.study.itaojin.cn/2020-04/eb1f330aab9b4fada4f8d6602dea251b.png"
debugger
//使用html2canvas 转换html为canvas
html2canvas(ele).then(function(canvas) {
debugger
if(false){ //判断IE下保存方法
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, fileName);
}else{//其他浏览器保存方法
var saveLink = document.createElement( 'a');
saveLink.href = data;
saveLink.download = data;
saveLink.click();
}
});
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
}
function getBase64Image(img,width,height) {//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;
}
</script>
<img id="ID" src=""/>
</body>
</html>