美文网首页JavaScript
js图片路径转base4

js图片路径转base4

作者: LuckyS007 | 来源:发表于2018-08-08 18:01 被阅读124次
  1. 注意点:
    tempImage.onload = function(){
    var baseSrc = getBase64Image(tempImage);
    var pHtml = "<img src="+baseSrc+"/>";
    o.html(pHtml);
    }
    这一部是一定要写的,图片路径加载需要时间,所以直接这样写的话:
    var baseSrc = getBase64Image(tempImage);
    会由于没加载到路径,值为空。
  2. 但遇到跨域的问题时,需要后台同事配置配置一下:


    image.png

    其实下面这一句是不起作用的:
    tempImage.crossOrigin = 'anonymous';
    图片地址是阿里云的话,可能是阿里云oss访问图片出现跨域问题:
    需要设置一下CDN

//图片路径转成base64
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 o = $('#wx');

        var tempImage = new Image();
        tempImage.crossOrigin = 'anonymous';
        tempImage.src = appletCode;
        tempImage.onload = function(){
            var baseSrc = getBase64Image(tempImage);
            var pHtml = "<img src="+baseSrc+" />";
            o.html(pHtml);
        }

相关文章

  • js图片路径转base4

    注意点:tempImage.onload = function(){var baseSrc = getBase64...

  • web前端笔记技巧总结

    图片路径问题:注意在怎么得到正确的图片路径,鉴于文件夹结构,html、php/js(文件在js文件夹下)设置图片时...

  • 图片问题

    图片路径: Uri 转 File

  • vue打包上线后路径报错问题

    vue-cli 打包配置 1、配置项目引用文件问相对路径;2、引用js文件路径错误;3、图片路径错误;4、背景图片...

  • vue js修改图片地址

    当我们在Vue项目中引用图片时,关于图片路径有以下几种情形: 使用一 当我们需要在js代码里面写图片路径的时候,如...

  • Vuejs图片编译后失败的问题

    问题: (vue.js)vue-cli 打包之后图片引用路径;描述:这是我的组件的路径;./src/compone...

  • 图片转base64,再base64转Blob对象,再Blob转u

    一.图片转base64(可以是绝对路径也可以是相对路径) 注意:使用相对路径图片会有跨域,利用vscode的liv...

  • 2020-11-27

    通常,我们通过input 上传一个文件时,需要先获取到图片的路径,然后再传给后端,那么怎么获取到图片的路径呢,js...

  • javascript简单图片上传预览制作

    第一步写入input 第二步js获取上传图片路径 这样获取到图片路径直接放入到你想要显示的dom就可以

  • Vue项目静态文件之图片引入

    在Vue中组件里引入图片时,往往会因为路径问题导致我们图片出不来 解决如下: 一:图片的显示 图片url在js的d...

网友评论

    本文标题:js图片路径转base4

    本文链接:https://www.haomeiwen.com/subject/uzvxbftx.html