远程图片可以生成base64吗？研究了几天了，找到食材，不会做做菜

Question

第一段是获得远程图片输出二进制代码到浏览器的，第二段是本地图片转换成base64的，如何将两个功能合并呢？谢谢

<%
dim id
id="https://img-home.csdnimg.cn/images/20201124032511.png"
Response.Buffer = True
Dim objXMLHTTP, xml
Set xml = Server.CreateObject("Microsoft.XMLHTTP") '创建对象
xml.Open "GET",""&id&"",False ' '设置对象
xml.Send '发送请求
if xml.status=200 then
Response.AddHeader "Content-Disposition", "attachment;filename="&id&"" '添加头给这个文件
Response.ContentType = "application/image/*" '设置输出类型
Response.BinaryWrite xml.responseBody '输出二进制到浏览器
end if
Set xml = Nothing
%>
<%
Function ImagesToBase64(FileName)
Dim xml
Dim root
Dim fs
Dim FilePath
Dim objStream
Dim objXMLDoc
Dim Base64
''定义变量完结
'创建对像
FilePath=Server.MapPath(FileName)
getFileExt = Mid(FilePath, InstrRev(FilePath, ".") + 1)

Set objXMLDoc=Server.CreateObject("msxml2.FreeThreadedDOMDocument")
'设定生成XML文档的根为 Base64Data
objXMLDoc.loadXML ""

Set fs = Server.createObject("Scripting.FileSystemObject") ''服务器需要FSO组件
If fs.FileExists(FilePath) Then '判断File文件是否存在
'用 stream 来读取数据
Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Type = 1
objStream.Open
objStream.LoadFromFile FilePath

objXMLDoc.documentElement.dataType = "bin.base64"
objXMLDoc.documentElement.nodeTypedvalue = objStream.Read
'数据流读取结束.得到了值 objXMLDoc
'创建XML文件
      Set xml = Server.CreateObject("msxml2.FreeThreadedDOMDocument")
      xml.load objXMLDoc
      If xml.ReadyState>2 Then
        Set root=xml.getElementsByTagName("Base64Data")
        Base64="<img src=""data:image/"&getFileExt&";base64,"&vbcrlf&root.Item(0).Text&""">"
      else
        Base64=""
      End If
      Set xml=Nothing
Set objStream=Nothing

else
Base64=""
End If

Set fs=Nothing
Set objXMLDoc=Nothing

ImagesToBase64=Base64

End Function
%>

<%
'测试时同文件夹应该包含该图片文件。
response.Write ImagesToBase64("1.jpg")
%>

Answer 1

你好，
你试一下这个呢。

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 dataURL = canvas.toDataURL("image/png");
    return dataURL // return dataURL.replace("data:image/png;base64,", ""); 
}
function myBase64() { 
    var img = document.createElement('img');//创建新节点
    var inImgUrl=$('#inImg').attr('src') ;//获取远程图片url
    var inImgw=$('#inImg').width();//获取当前远程图片在当前屏幕上的宽带
    var inImgh=$('#inImg').height();//获取当前远程图片在当前屏幕上的高度
    img.src = inImgUrl; //把图片url赋值给新节点
    img.setAttribute('width',inImgw);//设置新图片节点的宽
    img.setAttribute('height',inImgh);//设置新图片节点的高
    img.onload =function() { 
        var newImg = getBase64Image(img); //编译base64
        //alert(newImg);
        img.src = newImg; 
    } 
    $('#posterCanvasHeadimg').html(img); //插入新建的img
}