根据图片URL转换成base64格式显示(图片跨域携带cookie)

最新推荐文章于 2024-09-03 10:18:49 发布

[咖啡加冰]

最新推荐文章于 2024-09-03 10:18:49 发布

阅读量1.8k

点赞数 3

分类专栏： JavaScript 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/u014705309/article/details/103602587

版权

本文介绍了如何解决在微信中通过后端API获取的图片无法长按保存或分享的问题。关键在于将图片转换为base64编码，并在JavaScript（特别是ReactJS）中设置到src属性，确保跨域时携带cookie。

摘要由CSDN通过智能技术生成

函数代码如下:

getShareImg = () => {
   // var img = "https://example.api.com/shareImg.png";
    var img = "https://example.api.com/shareImg.jpeg";
    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.crossOrigin = 'use-credentials';
    image.src = img;
    image.onload = () => {
        var base64 = getBase64Image(image);
        console.log(base64);
        this.setState({
            shareImgBase64: base64
        })