js 如何将base64编码转图片格式

葛辉
  • 136

源文件转换成base64编码,需要再将base64的编码转换成一个图片,如何进行操作呢?有哪位大神知道的

回复
阅读 47k
5 个回答
function dataURLtoFile(dataurl, filename) {
    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 File([u8arr], filename, {type:mime});
}

这里的dataurl是base64格式的字符串,filename是你要命名的文件名

getWatermark("https://g.mdcdn.cn/itool/2/common/common_hd@3_l.png",function(src){
    var img = new Image();
    img.onload = function() {
    };
    img.src = src;
    document.body.appendChild(img);
});
//绘制canvas
function getWatermark(url,cb) {
    var img = new Image();
    img.crossOrigin = 'Anonymous';//使用跨域图像
    img.onload = function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.width=img.width;
        canvas.height=img.height;
        var src = canvas.toDataURL('image/png');
        cb(src);
    };
    img.src = url;
}
初竹殇
  • 2
新手上路,请多包涵

$('父元素').html('<img src="data:image/png;base64' + base64字符串编码 + '" alt="">');

最主要的是 src前面要加 这句data:image/png;base64

document.getElementById('img').setAttribute( 'src',     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );

来自stackoverflow

javascript - How can I set Image source with base64 - Stack Overflow https://stackoverflow.com/que...

再见洪飞飞
  • 1
新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏