js把图片url转base64

效果:

js代码:

        // 百度随便一张图
        var pic = "http://bpic.588ku.com/element_origin_min_pic/19/03/15/75076c485081d15ed9c224ad3e4ce4a1.jpg";
        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.setAttribute('crossOrigin', 'anonymous');//设置图片跨域访问!!!!!
        image.src = pic;
        image.onload = function () {
            var base64 = getBase64Image(image);
            console.log('我是图片,我被转化成base64了:', base64);
        }

提醒:

很多人会出现   报错:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解决方案1.

如果想使用toDataURL()生成图片文件的话，在canvas绘图过程中使用的图片应该是当前域下的。

解决方案2.  (上面的绿色的字)

        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous');//设置图片跨域访问!!!!!