js远程图片本地化

最新推荐文章于 2025-06-20 11:15:18 发布

转载最新推荐文章于 2025-06-20 11:15:18 发布 · 2.5k 阅读

学习笔记同时被 3 个专栏收录

13 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

base64编码

2 篇文章

订阅专栏

本文介绍了一种将网页中的图片转换为Base64编码的方法，利用jQuery和html2canvas库实现图片的实时抓取与转换，并展示了如何将转换后的Base64编码应用于图片展示。

方法convertImgToBase64(url, callback, outputFormat)

<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/html2canvas.js"></script>
<script>
    $(function(){
        var url = $("div[rel='photo'] img").attr("src");
        convertImgToBase64(url,function (base64Img) {
            $("div[rel='photo'] img").attr("src",base64Img);
        });
        setTimeout(function(){
            create_image();
        },1000);
    });
    var imgData;
    function create_image(){
        html2canvas($("#content"), {
            onrendered: function(canvas) {
                imgData = canvas.toDataURL("image/png");
                $("#aaa").attr("src",imgData);
                $("#aaa").show();
                $("#content").hide();
                $("#button").show();
            }
        });
    }
    function convertImgToBase64(url, callback, outputFormat){
        var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null;
        };
        img.src = url;
    }
</script>